（1）涉及到的属性：
animation-name：动画名称；
animation-duration：单次动画总时长；
animation-timing-function：时间函数；
animation-delay：播放前延时的时长；
animation-iteration-count：播放次数（具体的数字），当设置infinite时是循环播放；
animation-direction：播放顺序，其中normal是正常播放，alternate是轮流反向播放，播放次数必须在2次以上。
（2）书写方式
@keyframes 名字（自己取一个名字）{ ——>定义一个动画}
<!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，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）效果如下：
（1） 变形：通过变形可以改变盒子的视觉效果，变形不会改变盒子原本的位置和尺寸，因此不会对其他元素造成影响。
（2） 变形的类型
Translate（移动）
Scale（缩放，1以下是缩小，1以上是扩大）
Skew（倾斜，单位deg）
Rotate（旋转，默认是沿着Z轴旋转，单位deg）
（3） 定义原点
Transform-origin：设置盒子的中心点。
（4） 其他属性
背面可见性：backface-visibility
visible：默认值，背面可见
hidden：背面不可见
<!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 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）变形效果如下：
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
