Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

keyframes

The CSS @keyframes rule is used for rigging key frame animations. Key frames in CSS mark the starting and ending CSS property values of an animated effect. You can rig a CSS @keyframes animation using the from - to syntax if you only have two key frames in your animation. But if you want an animation to have more than two key frames, you can use percentage values ranging from 0%(first key frame) to 100%(last key frame).

You may find it helpful to study the animation property and the list of animatable properties.

Code Example

Animation with 2 Key Frames(starting and ending frames): 0% { property: start_value; } 100% { property: end_value; } /* OR */ from { property: start_value; } to { property: end_value; } Animation with 3 Key Frames: 0% { property: start_value; } 50% { property: value; } 100% { property: end_value; } Animation with 4 Key Frames: 0% { property: start_value; } 33% { property: value; } 66% { property: value; } 100% { property: end_value; } Animation with 5 Key Frames: 0% { property: start_value; } 25% { property: value; } 50% { property: value; } 75% { property: value; } 100% { property: end_value; } Make the first 2 key frames take up most of the animation duration time: 0% { property: start_value; } 80% { property: value; } 100% { property: end_value; }

Browser Specific Prefixes

The animation aspects of CSS are relatively new. At the time of writing this book the Standard syntax works in all modern versions of all browsers except for Chrome and Safari. So all we have to do is apply a version of those CSS properties/rules with the -webkit- prefix to also make it work in webkit driven browsers like Chrome and Safari. This is only a temporary measure, Chrome and Safari should use standard syntax soon and we can avoid adding more code for specific browsers. #player { background: url( player_sprite_sheet.png ); width:100px; height:100px; -webkit-animation: run-left 1.0s steps(6) infinite; animation: run-left 1.0s steps(6) infinite; } @-webkit-keyframes run-left { from { background-position: 0px; } to { background-position: -640px; } } @keyframes run-left { from { background-position: 0px; } to { background-position: -640px; } }

Official Documentation

http://www.w3.org/TR/css3-animations/#keyframes

CSS

At Rules

charsetcounter styledocumentfont facefont feature valuesimportkeyframesmedianamespacesupports