1. Animation
The animation sequence is set by @keyframes. Each key frame in the sequence describes how animation elements are rendered within a specific time of the animation sequence.
@keyframes Animation Name{
from{
}
to{
}
}
@keyframes Animation Name {
0% {
left:0;
}
...
100% {
left:1600px;
}
}
2. Abbreviation of all animation attributes
-
The length of time required for animation-duration animation to complete a cycle
Unit: s,ms default value is 0 -
Number of iterations for animation-iteration-count animation
The default value is 1
Infinite infinite loop -
animation-name animation name
-
animation-delay animation delay, that is, the time between the successful loading of elements and the running of animation
Unit: default value of s MS 0, i.e. run immediately after loading -
animation-direction animation direction
normal
reverse Plays Frame Sequence Reversal
Alternate alternate
alternate-reverse needs to be inverted when it is first played -
animation-play-state pause/restore
Running running status
Paused paused state -
animation-fill-mode filling mode
none default
forwards
backwards -
animation-timing-function animation speed curve
ease default
ease-in is slow and fast
ease-out is fast and slow
ease-in-out slows down first and then slows down
liner linear growth
3. Third party css animation library
animate.css
How to apply the third-party library css/js [iconfont fontawesome animate.css]:
1. Module with npm install xxx
2. Download animate.css/iconfont.css locally
3. cdn. Somebody else manages the code on someone else's server (cdn). We use it online.
Breathing lamp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,html{
width: 100%;
height: 100%;
background-color: black;
}
/* .outer{
width: 600px;
height: 600px;
background-color:black;
position: absolute;
top: 100px;
left: 500px;
opacity: 0.5;
border-radius: 50%;
animation-name: move;
animation-duration: 5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}*/
.inner{
width: 300px;
height: 300px;
background-color: yellow;
margin-left:600px;
margin-top: 200px;
border-radius: 50%;
box-shadow:yellow 0 0 80px;
opacity:0.5;
animation-name: move;
animation-duration: 5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes move{
from{
opacity:0.1 ;
}
to{
opacity: 0.7;
}
}
</style>
</head>
<body>
<!-- <div class="outer"></div> -->
<div class="inner"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
box-sizing:border-box;
}
.content{
background-color: #333;
width: 400px;
height: 600px;
margin: 0 auto;
}
.content >.box{
height:400px;
padding: 40px;
animation-name: outer;
animation-duration: 10s;
animation-timing-function: linear;
}
.content >.box>.outer{
height: 100%;
border:5px solid #fff;
border-radius: 50%;
padding: 20px;
animation-name: inner;
animation-duration: 10s;
animation-timing-function: linear;
}
.content .box .inner{
height: 100%;
border:10px solid #fff;
border-radius: 50%;
}
@keyframes outer{
25%{
padding: 30px;
}
50%{
padding: 40px;
}
}
@keyframes inner{
25%{
padding: 30px;
}
50%{
padding: 20px;
}
75%{
padding: 30px;
}
100%{
padding: 20px;
}
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="outer">
<div class="inner">
</div>
</div>
</div>
</div>
</body>
</html>
Deformation and Transition
transform: transform elements;
transition: When the attributes of the element change, give it a transitional animation effect.
-
Rotating rotate
rotateX(angle) rotates around the X-axis
rotateY(angle) rotates around the X-axis
rotateZ(angle) rotates around the X-axis -
Scaling
scale function can change the size of elements. scale transformation is realized by vector. Its coordinates define the scaling ratio in each direction.
scale(sx)
scale(sx,sy)
sx represents the abscissa of the scaling vector
sy stands for the ordinate of the scaling vector (if not specified, default is equal to the value of sx, which keeps the scaling ratio consistent and the shape of the element) -
tilt
The skew(ax,ay) function represents the shear or torsion of elements, the ax represents the horizontal torsion, and the ay represents the vertical torsion. It can also make shewX(ax) and shewY(ay)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
margin: 100px auto;
transform: skewX(10deg);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
- translate Mobile
The translate(tx,ty) function can move elements. TX is the distance moving horizontally and ty is the distance moving vertically.
For the displacement translate() method, we divide it into three cases:
(1) translateX(x): Elements move only horizontally (X axis moves);
(2) translateY(y): Elements move only vertically (Y axis);
(3) transklate(x,y): Elements move both horizontally and vertically (X axis and Y axis move simultaneously);
1. Translation X (x) method
Grammar:
transform:translateX(x);
Explain:
In CSS3, all metamorphic methods belong to the transform ation attribute, so all metamorphic methods should be preceded by "tranform:" to indicate "metamorphic" processing. This must be remembered.
X denotes the distance the element moves in the horizontal direction (X axis), in units of px, em, or percentage, etc.
When x is positive, it means that the element moves to the right in the horizontal direction (the positive direction of the X axis); when x is negative, it means that the element moves to the left in the horizontal direction (the negative direction of the X axis).
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 displacement translate()Method</title>
<style type="text/css">
/*Setting the original element style*/
#origin
{
margin:100px auto;/*horizontally*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*Setting the current element style*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:translateX(20px);
-webkit-transform:translateX(20px); /*Compatibility - webkit - engine browser*/
-moz-transform:translateX(20px); /*Compatible-moz-Engine Browser*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
- vision
Two ways of writing, one for stage elements (common parent elements of animation elements) and the other for current animation elements
.stage{
perspective: 600px;
}
.stage .box{
transform: perspective(600px)rotateY(45deg);
}
- deformation
perspective-origin
Refers to the position of the eye, the default stage or element center.
Put it elsewhere
perspective-origin:25% 75%;