Using @keyframes to create animations in CSS3, explained with examples

Animated properties can gradually change from one value to another, such as size, quantity, percentage, and color. Use @keyframes to create animations by gradually changing one CSS style setting to another. Animation is also used a lot in work. Next, I will introduce how to use animation.

1. @keyframes syntax rules
During the animation process, the CSS style can be changed multiple times. Specify when a change occurs using %, or the keywords "from" and "to", which are the same as 0% to 100%. 0% is when the animation starts, 100% is when the animation is finished. For best browser support, selectors should always be defined as 0% and 100%.

@Keyframes is an animation, which can be understood as a group composed of multiple transforms.
Grammar:
@keyframes animation name {
from{ css1}
to{ css2 }
}

@keyframes animation name {
0% {css1}
50% {css2}
100% {css3}
}
Note: Use the animation attribute to control the appearance of the animation, and also use the selector to bind the animation.

2. Animation attribute value

Use animation when calling this animation. Animation consists of six attributes:

animation-name specifies the key to be bound to the selector The name of the frame
animation-duration The animation specifies how many seconds or milliseconds it takes to complete
animation-timing-function Sets how the animation will complete a cycle
animation-delay Sets the delay interval before the animation starts
animation -iteration-count Define the number of times the animation is played
animation-direction Specify whether the animation should be played in reverse in turn
animation: The number of delayed playbacks at the beginning of the animation name, time speed curve, and played in reverse in turn
Take an example:

Let the square move from the upper left corner to the upper right corner, then to the lower right corner to the lower left corner and finally back to the upper left corner, and the color will also change accordingly

div{animation:mymove 5s infinite;
 -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@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;}
}
@-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;}
}

Above The content introduces how to use animation, but you still need to do it yourself, knock more, and try different effects!

The above is the detailed content of Using @keyframes to create animations in CSS3, explained with examples. For more information, please follow other related articles on the PHP Chinese website!