The transition properties
- animationAttributes are
Animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, Animation-direction, animation-fill-mode and animation-play-state
A short form of attribute. - Not all attributes are supported
animation
. supportanimation
The properties of the -CSS animated properties - Used to specify one or more groups of animations separated by commas.
- Grammar:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name
The animation-name property specifies the names of the sequence of animations to be performed on the element, each corresponding to the name of the animation sequence defined by @keyframes.
@keyframes
- @keyframes(keyframe), according to the rules used to define the style of the animation keyframe, to control
CSS animations
The intermediate step. - Used when defining an animation
%
Or keywordfrom
andto
To set the change in the middle step of the animation.from
The equivalent of0%
.to
The equivalent of100%
- To get the best browser support, you should always define
0%
and100%
Selector of. - Grammar:
@keyframes< rule name > {0% {top:0px; }25% {top:200px; }50% {top:100px; }75% {top:200px; }100% {top:0px;}
}
Copy the code
animation-duration
- The animation-duration property specifies the animation duration. The default value is 0, which means no animation.
- The length of the animation cycle, in seconds
(s)
Or ms(ms)
, no units or negative values are invalid.
animation-timing-function
- The animation-timing-function property controls the timing of CSS animation execution.
- It specifies several default values
linear|ease|ease-in|ease-out|ease-in-out
To achieve the moving effect. You can also usecubic-bezier(n,n,n,n)
Function custom, move the curve. - use
steps(n,[start | end])
Jump animation, simple understanding is0%
到Next rule, the only changen
Second, not tween animation.
animation-delay
- Animation-delay THE CSS property defines when the animation starts, that is, the animation execution time is delayed.
- Values are available in seconds (s) and milliseconds (ms). If the unit is not set, the definition is invalid. 0s is the default time.
- Set negative value to start animation directly at the corresponding frame with reduced time.
animation-iteration-count
- The animation-rotund-count property defines the number of times an animation can be run before it finishes an infinite loop, with a default value of 1.
- Value:
infinite
Unlimited time,<number>
A positive number is a number of times, a decimal number is executed to the end of the corresponding position, and a negative number is invalid.
animation-direction
Animation-direction indicates whether the animation is played backwards. Normal At the end of each animation loop, the animation is reset to the starting point, which is the default. Alternate at the end of each animation cycle, the animation starts in reverse at the end point. Reverse executes the animation from the end point, in reverse. Alternate-reverse executes the animation from the end point, in reverse, to the start point, in reverse, to the end point, and repeats.
animation-fill-mode
- The animation-fill-mode property is used to set whether the style of the key frame is preserved before and after the animation is executed.
- The default value
none
Do not modify any styles. forwards
When the animation is over, change the style of the element to the style of the last frame.backwards
When the animation starts, change the element style to the first frame style. For example, if the wait time is set, the wait time will also change the element style to the first frame style.both
followRecently and backwards
The rule changes the style at the beginning and end.
animation-play-state
- The animation-play-state property defines whether an animation is running or paused.
- value
paused
The specified animation has been paused.running
Specifies that the animation is playing. Usually throughjs
To set this property to the element to control the animation.
Commonly used way
CSS3 3D planet rotation && browser rendering principle
Ripple effect
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
<style type="text/css">
.animation {
box-sizing: border-box;
position: relative;
width: 20px;
height: 20px;
margin: 100px auto;
background: #409eff;
border-radius: 50%;
}
.animation:after {
box-sizing: border-box;
content: "";
display: block;
position: relative;
width: 20px;
height: 20px;
border: 5px solid #ff1883;
border-radius: 50%;
-webkit-animation: antSing 1.2 s ease-in-out infinite;
animation: antSing 1.2 s ease-in-out infinite;
}
@keyframes antSing {
0% {
border-color: #409eff;
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.5;
}
100% {
border-color: #ff1883;
-webkit-transform: scale(2.5);
transform: scale(2.5);
opacity: 0; }}</style>
</head>
<body>
<div class="animation"></div>
</body>
</html>
Copy the code
- Through the animation property, set the element to grow while hiding, realize the ripple effect
Loading animation
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
<style type="text/css">
.loading {
background-color: # 000000;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
.loading-center-load {
position: relative;
height: 20px;
width: 100px;
margin: 200px auto;
}
.object {
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
-webkit-animation: object 2.5 s linear infinite;
animation: object 2.5 s linear infinite;
}
.object_one{}.object_two {
left: 20px;
animation-delay: -0.5 s;
}
.object_three {
left: 40px;
animation-delay: -1s;
}
.object_four {
left: 60px;
animation-delay: -1.5 s;
}
.object_five {
left: 80px;
animation-delay: -2s;
}
@keyframes object {
0% {
left: 100px;
top: 0;
}
80% {
left: 0;
top: 0;
}
85% {
left: 0;
top: -20px;
width: 20px;
height: 20px;
}
90% {
width: 40px;
height: 15px;
}
95% {
left: 100px;
top: -20px;
width: 20px;
height: 20px;
}
100% {
left: 100px;
top: 0; }}</style>
</head>
<body>
<div class="loading">
<div class="loading-center-load">
<div class="object object_one">1</div>
<div class="object object_two">2</div>
<div class="object object_three">3</div>
<div class="object object_four">4</div>
<div class="object object_five">5</div>
</div>
</div>
</body>
</html>
Copy the code
- We need five balls to move, so let’s set the ball position.
- Define the motion trajectory, using
infinite
Infinite loop effect. - use
animation-delay
Property is set to a negative value, so that the animation loop for the first time, directly from the corresponding frame position to ensure the loop effect.
Use Sprite diagram to achieve animation
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
<style type="text/css">
.loading {
width: 75px;
height: 140px;
background: url(./1.png);
margin: 100px auto;
animation:imgFr 1s step-start infinite ;
}
@keyframes imgFr {
0% {
background-position: 0 0;
}
14.3% {
background-position: -80px 0;
}
28.6% {
background-position: -160px 0;
}
42.9% {
background-position: -240px 0;
}
57.2% {
background-position: 0 -143px;
}
71.5% {
background-position: -80px -143px;
}
85.8% {
background-position: -160px -143px;
}
100% {
background-position: -240px -143px; }}</style>
</head>
<body>
<div class="loading"></div>
</body>
</html>
Copy the code
- Mainly using
background-position
Property gets the position of the figure in the image. - use
step-start
Make the animation not a tween, but a jump animation.step-start
Is equivalent tosteps(10,start)
The animation is divided into 10 steps, and the left end of the animation is the beginning.