1, complex animations
(1) relates to the properties:
animation-name: name of the animation;
animation-duration: total duration of a single movie;
animation-timing-function: a function of time;
animation-delay: when a long delay before the playback;
animation-iteration-count: Views (specific number), when the setting is infinite loop;
animation-direction: playback sequence, where normal is the normal play, alternate turns is played in reverse, play count must be at least 2 times.
(2) Notation
@keyframes name (a name himself) {->} defines an animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>复杂动画练习</title>
</head>
<style>
.box {
width: 200px;
height: 200px;
background-color: blueviolet;
border: solid black;
position: relative;
top: 0;
/* 动画名称 */
animation-name: demo;
/* 动画时长 */
animation-duration: 5s;
/* 动画运行速度 */
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
/* 播放前延迟的时长 */
animation-delay: 3s;
/* 播放次数，这里写的时循环播放，可以写具体数字 */
animation-iteration-count: infinite;
/* 播放顺序，这里写的时轮流反向播放，可以写normal正常播放 */
animation-direction: alternate;
}
@keyframes demo {
from {
top: 0;
border-radius: 0;
}
20% {
top: 100px;
left: 100px;
border-radius: 30px;
}
50% {
top: 200px;
left: 100px;
border-radius: 30px
}
to {
top: 400px;
left: 400px;
border-radius: 50%
}
}
</style>
<body>
<div class="box">
动画练习
<!-- <img src="img/2010011712541759.jpg" alt=""> -->
</div>
</body>
</html>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）Results are as follows:
2, cartridge deformation
(1) Modification: visual effects can be changed by deforming the cassette, the deformation does not change its original position and size of the box, it will not affect other elements.
(2) the type of modification
Translate (mobile)
Scale (zoom, 1 The following is a narrow, expanding more than 1)
Skew (tilt unit deg)
Rotate (rotation, default is rotated along the Z-axis, the unit deg)
(3) defines the origin
Transform-origin: Set the center point of the box.
(4) Other Properties
Visibility back surface: backface-visibility
visible: By default, the back is visible
hidden: the back is not visible
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子变形</title>
</head>
<style>
.box {
width: 260px;
height: 260px;
position: relative;
}
.zheng,
.fan {
width: 260px;
height: 260px;
font-size: 26px;
border: solid black;
color: white;
text-align: center;
line-height: 260px;
position: absolute;
top: 0;
left: 0;
transition: all 1s;
backface-visibility: hidden;
}
.zheng {
background-color: blueviolet;
z-index: 2;
}
.fan {
background-color: green;
transform: rotateY(-180deg) rotateZ(-180deg);
}
.box:hover .zheng {
transform: rotateY(180deg) rotateZ(180deg);
}
.box:hover .fan {
transform: rotateY(0deg) rotateZ(0deg);
}
</style>
<body>
<div class="box">
<div class="zheng">正面</div>
<div class="fan">反面</div>
</div>
</body>
</html>
学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）Modification effect is as follows: