前言：
一个好的事物应该是有生命，而不是死板的，我们在制作网页时也是如此，为了让画面变得更加生动有趣，我们会给它加上动画的效果，例如过度、变形、旋转、放缩。
动画：
什么是动画：
动画是一种动态的效果，例如我们的GIF图也是一种动画，其实现的方式就是通过帧来实现的，我认为是多张图片的切换。
动画的基础操作：
设置关键帧：
语法：
文字解释：
（1）基本框架：
@keyframes 关键帧名称 {内容}
（2）内容：
内容当中使用from（或者0%）表示动画开始的位置，使用to（或者100%）表示结束的位置。
代码演示：
<1>
@keyframes name { from{ /*开始的位置*/ } to{ /*结束的位置*/ } }<2>
@keyframes name { 0%{ /*开始的位置*/ } 100%{ /*结束的位置*/ } }
动画的常用属性：
可以参考此篇文章：点此跳转
属性 解释 属性值解释 animation-name 指定要对当前元素生效的关键帧的名字 自定义名称 animation-duration 指定动画的执行时间 填入运行时间（秒或毫秒） animation-timing-function 此属性的详细解释看此处： 点此跳转 animation-iteration-count 指定动画执行的次数
常数 次数 infinite 指定动画应该播放无限次（永远） animation-direction 指定动画运行的方向
normal 默认值 从from向to运行 每次都是这样 reverse 从 to 向 from 运行 每次都是这样 alternate 从 from 向 to 运行 重复执行动画时反向执行 alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行 animation-play-state 设置动画的执行状态
running 默认值 动画执行 paused 动画暂停 animation-fill-mode 指定动画的填充模式
none 默认值 动画执行完毕元素回到原来位置 forwards 动画执行完毕元素会停止在动画结束的位置 backwards 动画延时等待时，元素就会处于开始位置 both 结合了 forwards 和 backwards animation-delay 设置动画的延时 单位可以是秒（s）或毫秒（ms）
当为负数时，立即开始动画，但跳过前多少时间的动画
transition 可以同时设置动画相关的所有属性 如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
动画使用方法：
使用animation【这是一个简写的用法，里面直接写入上方属性】添加动画效果，动画名称和动画时长必须赋值
代码演示：
<!DOCTYPE html> <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> .outer{ height: 500px; border-bottom: 10px black solid; } .outer div{ float: left; width: 100px; height: 100px; background-color: red; animation: act .1s forwards linear infinite alternate; } div.box1{ background-color: orange; animation-duration: 5s; } @keyframes act{ from{ margin-top: 0; } to{ margin-top: 400px; } } </style> </head> <body> <div class="outer"> <div class="box1"></div> </div> </body> </html>
过渡(transition)：
可以参考这篇文章：点此跳转
什么是过渡：
过度是指指定一个属性发生变化时的切换方式，其与动画类似，两者的不同之处在于过渡需要条件的激活。
常用属性：
| 属性 | 解释 | 属性值 | ||||||||||||
| transition-property | 属性用来设置元素中参与过渡的属性名称 |
|
||||||||||||
| transition-duration | 用来设置过渡需要花费的时间（单位为秒或者毫秒） | 用来设置过渡需要花费的时间（单位为秒或者毫秒） | ||||||||||||
| transition-timing-function | 属性用来设置过渡动画的类型 |
|
代码演示(举例)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 100px;
transition-property:width;
}
/*点击放大*/
img:hover{
width: 500px;
}
</style>
</head>
<body>
<div>
<img src="../img/4.jpg" alt="">
</div>
</body>
</html> 
变形（仅仅讲三维空间的）：
可以参考此篇文章：点此跳转
什么是变形：
变形是指通过css来改变元素的形状或位置，不会影响到页面的布局，百分比是相对于自身计算
常用属性：
| 属性 | 说明 |
| transform: translateX() | 沿着x轴平移（水平） |
| transform: translateY() | 沿着Y轴平移（竖直） |
| transform: translateZ() | 沿着Z轴平移（z轴可以理解为离使用者的远近） |
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
perspective:800px;
}
.box1{
width: 500px;
height: 500px;
margin: 0px auto;
margin-top: 100px;
background-color: lightblue;
}
.box2{
width: 100px;
height: 100px;
margin: 0px auto;
background-color: aquamarine;
}
.box2:hover{
transform: translatez(200px);
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html> 
旋转（仅仅讲二维空间的）：
可以参考此篇文章：点击查阅
什么是旋转：
旋转使某一个物体沿着某个中心旋转相应的度数，角度为正表示顺时针旋转，负数表示逆时针旋转。
常用属性：
| 属性 | 解释 |
| transform：rotate（角度） | 围绕着中心点进行旋转 |
| transform：rotatex（角度） | 围绕着 x轴点进行旋转 |
| transform：rotatey（角度） | 围绕着y轴点进行旋转 |
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box1{
width: 200px;
height: 200px;
margin: 0px auto;
margin-top: 100px;
background-color: lightblue;
}
.box2{
width: 200px;
height: 200px;
margin: 0px auto;
background-color: aquamarine;
}
.box2:hover{
transform: rotate(45deg);
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html> 
放缩：
可以参考此篇文章：点击查阅
什么是放缩：
放缩是指物体在根据某个中心线等比例向两边伸长。
常用属性：
| 属性 | 说明 |
| scalex（倍数） | 沿着y的中心线向水平两侧伸长 |
| scaley（倍数x） | 沿着x的中心线向竖直两侧伸长 |
| scale（x的倍数，y的倍数）/scale（倍数） | 分别沿着x，y的中心线向两侧伸长【当只有一个倍数时水平竖直方向进行相同操作】 |
| scalez（倍数） | 沿着z轴进行伸长操作 |
| scale3d（x的倍数，y的倍数，z的倍数） | 与scale操作相同 |
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box1{
width: 200px;
height: 200px;
margin: 0px auto;
margin-top: 100px;
background-color: lightblue;
}
.box1:hover{
transform: scale(2,3);
}
</style>
<body>
<div class="box1">
</div>
</body>
</html>
