CSS3 @keyframes rules
Examples
Make a div element gradually moves 200 pixels:
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
try it"
In the bottom of this page for more examples.
Browser Support
属性 | |||||
---|---|---|---|---|---|
@keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Tag definitions and instructions
Use @keyframes rules, you can create animation.
Creating animation by gradually changing the setting from one CSS style to another.
During the animation, you can change the CSS style setting times.
Use occurs when a specified change in%, or keyword "from" and "to", and this is the 0% to 100% identical.
0% is the beginning of the animation, 100% when the animation is complete.
For optimal browser support, you should always be defined as 0% and 100% of the selector.
Note: Use theanimation property to control the appearance of the animation is also used to select bind animation. .
grammar
value | Explanation |
---|---|
animationname | Required. Define the animation name. |
keyframes-selector | Required. The percentage duration of the animation. Legal value: 0-100% Note: You can use an animated keyframes-selectors. |
css-styles | Required. One or more legitimate CSS style attributes |
Online examples
Examples
Many of the key frame selector to add a movie:
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
try it"
Examples
Change many CSS styles in one animation:
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
try it"
Examples
Many keyframe selectors with many CSS styles:
{
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;}
}
try it"
related articles
Tutorial CSS3: CSS3 Animation