【Introduction】
Animation is the effect of gradually changing an element from one style to another, and can change any number of styles as many times as desired
Generally use percentages to specify when the change occurs, or use the keywords "from" and "to", which are equivalent to 0% and 100%.
0% is the start of the animation and 100% is the end of the animation. For best browser support, 0% and 100% selectors should always be defined
【compatible】
IE10, Firefox, and Opera all support animated properties, while Chrome and Safari require the prefix -webkit-
Advantages: About animation is introduced by CSS3, which can replace animated pictures, Flash animation and JavaScript in many web pages
【main content】
1. The @keyframes rule of CSS3;
2. The animation property and the 6 animation properties it configures
①animation-name animation name; ②animation-duration animation duration; ③animation-timing-function timing function;
④animation-delay animation delay; ⑤animation-iteration-count animation iteration count; ⑥animation-direction animation direction
【Details】
1. CSS3 @keyframes rule
To create animations in CSS3, use the @keyframes rule. The @keyframes rule is used to create animations. By specifying a CSS style in @keyframes, you can create an animation effect that gradually changes from the current style to the new style.
compatible:
Currently no browsers support the @keyframes rule
Firefox supports alternate @-moz-keyframes rules; Opera supports alternate @-o-keyframes rules; Safari and Chrome support alternate @-webkit-keyframes rules
Animation binding selector:
When creating an animation in @keyframes, it needs to be tied to some selector, otherwise it won't animate
An animation can be bound to a selector by specifying at least two of the following CSS3 animation properties:
①Specify the name of the animation; ②Specify the duration of the animation
Note: The name and duration of the animation must be defined. If duration is ignored, animation will not be allowed because the default value is 0
grammar:
@keyframes animationname animation name{keyframes-selector duration{css-styles;style}}
2. animation property
Shorthand property for all its animation properties, except the animation-play-state property
Role: Bind the animation to the document element (div, etc. dom)
The animation property is a shorthand property for setting six animation properties:
①animation-name animation name; ②animation-duration animation duration; ③animation-timing-function timing function;
④animation-delay animation delay; ⑤animation-iteration-count animation iteration count; ⑥animation-direction animation direction
[Compatible] IE10, Firefox and Opera support 6 animation properties, Safari and Chrome support alternative -webkit+... properties
The six animation properties are introduced in turn:
①animation-name animation name-----specify the name of the keyframe that needs to be bound to the selector;
②animation-duration animation duration ------ specifies the time it takes to complete the animation, in seconds or milliseconds (the default value is 0, which means no animation effect);
③animation-timing-function The animation timing function ------ specifies the speed curve of the animation, and the speed curve defines the time it takes for the animation to change from one set of CSS styles to another.
The animation-timing-function uses a mathematical function called the Cubic Bezier function to generate the velocity curve. You can use your own values in this function, or predefined values:
Value Description Test| linear | The speed of the animation is the same from start to finish. | test |
| ease | default. The animation starts at a low speed, then speeds up and slows down before ending. | test |
| ease-in | The animation starts at a low speed. | test |
| ease-out | The animation ends at a low speed. | test |
| ease-in-out | The animation starts and ends at low speed. | test |
④animation-delay animation delay ------ define when the animation starts, the property value is in seconds or milliseconds
Tip: Negative values are allowed, for example -2s makes the animation start immediately, but skips 2 seconds from the beginning and goes directly to the animation cycle. Default value is 0
⑤ animation-iteration-count animation iteration count ------ specifies the number of times the animation should be played
Attribute value: n------ defines the number of times the animation is played; infinite------ specifies that the animation should be played infinitely
⑥ animation-direction animation direction ------ specifies whether the animation should be played in reverse in turn
Property value: normal------default value, the animation plays normally; alternate------the animation plays in reverse in turn (plays normally at odd times (1, 3, 5, etc.), and plays normally at even times ( 2, 4, 6, etc.) play backwards), for example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Canvas </ title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><strong>Note:</strong> Not supported in Internet Explorer 9 and earlier
animation-direction property. </p>
<div></div>
</body>
</html>
3. Other animation properties
①animation-play-state animation play state ------ specifies whether the animation is running or paused, the default is "running"
Attribute value: paused------ specifies that the animation has been paused; running------ specifies that the animation is playing
②animation-fill-mode Animation fill mode ------ specifies the state outside the animation time of the object, which refers to whether the animation effect is visible before or after the animation is played
In layman's terms, what state is maintained after the animation ends
(1) none means that the state after the end is not set, and returns to the same as the initial state by default;
(2) Forwards means that the animation element is set to the state at the end of the entire animation. ;
(3) Backwards is clearly set to return to the initial state after the animation ends;
(4) both indicates that it is set to the end or start state. Usually return to the default state