Move the div element down at a constant speed:
@keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox */ { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari 和 Chrome */ { from {top:0px;} to {top:200px;} } @-o-keyframes mymove /* Opera */ { from {top:0px;} to {top:200px;} }
There are more instances at the bottom of the page.
Browser support
Ie | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
Currently, no browser supports @keyframes rules.
Firefox supports alternative rules for s-moz-keyframes.
Opera supports the alternative rule of s-o-keyframes.
Safari and Chrome support alternative rules for s-webkit-keyframes.
Definitions and usages
By @keyframes rules, you can create animations.
Animation is created by gradually changing one set of CSS styles to another.
During the animation process, you can change this CSS style several times.
Specify when the change occurs as a percentage, or by using the keywords "from" and "to", equivalent to 0% and 100%.
0% is the start time of the animation and 100% of the end time of the animation.
For best browser support, you should always define 0% and 100% selectors.
Note: Use animation properties to control the appearance of the animation while binding the animation to the selector.
Grammar
@keyframes animationname {keyframes-selector {css-styles;}}
Value | Describe |
---|---|
animationname | Necessary. Define the name of the animation. |
keyframes-selector |
Necessary. The percentage of animation time. Legal value:
|
css-styles | Necessary. One or more legitimate CSS-style properties. |
Try it yourself - example
Instance 1
Add multiple keyframe selectors to an animation:
@keyframes mymove { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } @-moz-keyframes mymove /* Firefox */ { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } @-webkit-keyframes mymove /* Safari 和 Chrome */ { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } @-o-keyframes mymove /* Opera */ { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} }
Example 2
Change multiple CSS styles in one animation:
@keyframes mymove { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-moz-keyframes mymove /* Firefox */ { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-webkit-keyframes mymove /* Safari 和 Chrome */ { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-o-keyframes mymove /* Opera */ { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} }
Example 3
Multiple keyframe selectors with multiple CSS styles:
@keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } @-moz-keyframes mymove /* Firefox */ { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } @-o-keyframes mymove /* Opera */ { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} }
Related pages
CSS3 tutorial: CSS3 animation