Browser Support
Numbers in the table specifies the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, -ms- , or -o- specifies the first version that worked with a prefix. See the web site http://www.caniuse.com . Browsers that do not support animation will ignore the animation rules and properties. Modernize can be used to check if CSS animations are supported and provide you the option to create a fallback approach.
Property |
IE |
Chrome |
FireFox |
Safari |
Opera |
@keyframes & animation |
10.0 |
4.0 -webkit- |
16.0, 5.0 -moz- |
4.0 -webkit- |
15.0 -webkit-, 12.1, 12.0 -o- |
- CSS Animation does not work with IE 9 or earlier.
- Like Flash, Animate, jQuery, GSAP, etc. CSS animation is created by using the following steps:
- Create an object (and position it on the screen using CSS)
- Give the object an animation name to bind it to an element or elements(i.e., animation: changeColor)
- Tell object to do something at various from/to or percentage keyframes
- WebKit prefix refers to the following browsers: Chrome, Safari, Opera. Notice that the prefixes has a dash in front of them (i.e., -webkit)
- Keyframes can be in percent from 0% to 100% and any increment between (i.e., 10%, 20%, 50%, 100%) or use the “from” and “to” keywords which represents only two keyframes from 0% to 100%.