CSS3 @keyframes Rules

With CSS3, we can create animations without having to use JavaScript, and this article shares the @keyframes rules, and in fact, it's so easy to master. Here's the difference between transform and @keyframes animations: Transform is performed only once, and @keyframes animation is looping.

Let's look at a small example:

< h4 > Hello World</h4>

h4 {    animation: color 2s infinite alternate/* name time infinite loop rotate reverse */}@ KeyFrames color{    from{        color:#f00;    }     to {        color: #0f0;    } }

Let's examine the code above:

First write the elements to animate, and then @keyframes to create the animation, followed by the animation name, from the inside is the animation start (0%) style, to the inside of the animation end (100%) style, and then the animation bound to the selector, here are a few options below to introduce:

• Animation-name: Specifies the name of the @keyframes animation
• Animation-duration: Specifies the seconds or milliseconds that the animation takes to complete a cycle. Default is 0
• Animation-timing-function: Specifies the speed curve of the animation. The default is "ease"
• Animation-delay: Specifies when the animation starts. Default is 0
• Animation-iteration-count: Specifies the number of times the animation is played. Default is 1
• Animation-direction: Specifies whether the animation will play backwards in the next cycle. The default is "normal"
• Animation-play-state: Specifies whether the animation is running or paused. The default is "running"
• Animation-fill-mode: Specifies the state outside the animation time of the object

And I wrote above the animation:color 2s infinite alternate; is a shorthand form:

h4 {    animation: color 2s infinite alternate;} /*  */h4{    animation-name: color;     Animation-duration: 2s;     animation-iteration-count: infinite;     animation-direction: alternate;}

Let's look at an example of an arrow moving up and down (combined with transform):

<class= "box"><class= "Arrow"  ></i></span>

. Arrow{Display:Inline-block;width:20px;Height:20px;Border-left:2px #f60 Solid;Border-bottom:2px #f60 Solid;Transform:Rotate ( -45deg);}. Box{Display:Inline-block;Animation:triangle 2s infinite;/*name, duration, number of times the loop was executed*/}@keyframes Triangle{0%{Transform:Translate (0, 0); }50%{Transform:Translate (0, 10px); }100%{Transform:Translate (0, 0); }}

Also note that a little transform is the CSS3 attribute, preceded by prefix, such as-O-、-moz-, @keyframes is also.

CSS3 @keyframes Rules