CSS Animatons summary
Animation is not available on IE 9 and lower and Opera Mini.
When your animation at 0% has the default values (like
For older smartphones, best to add
-webkit—. Best to use the site's relative usage statistics.
Advantages of CSS Animations:
- Looping (looping infinitely)
- Self starting (don't require trigger like transition)
- Repeating (how many times to repeat)
- Alternating (bac and forth)
- Grouping – Each animation can change a number of properties
left:0) then you can even omit the 0% declaration. - How to do bounces
The cubic-bezier is not adequate to realistically create bouncing effects. You need animation with keyframes and do it manually.
You can do css animation timing functions inside keyframe blocks to define how each of those percentages should change over time.