作为前端三剑客之一的CSS，最受大家关注的就是CSS3的改变，本文带大家复习一下CSS3中关于2D（平移、旋转，缩放、倾斜），3D旋转，样式过渡，动画规则等内容，来实现页面中常用的动画。
动画规则
我们最先复习的是关于动画的内容。
动画也就是我们常说的@keyframes，要创建CSS3动画，首先要了解@keyframes规则。
@keyframes规则是创建动画。
@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
案例：在3s内，让一个div的背景色由红色改为绿色
@keyframes test{
from {
background-color: red;
}
to {
background-color: green;
}
}
#app {
animation: test 3s;
}
这是一个最简单的动画案例，@keyframes要独立于选择器之外单独创建，后面紧跟它的名字。设置内容的方式由两种：
- from~~~to
from即指定动画开始的样式，to为动画结束的样式
- 0%~~~100%
你还可以通过百分比的方式把整个动画过程进行任意拆分。
创建完动画规则之后，我们就需要在选择器中对它进行调用。要调用的属性为animation，最简单的值就是动画名字+动画时间，也就是案例中的test 2s。
下面的表格列出了@keyframes规则和所有动画属性。
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画规则 |
| animation | 所有动画属性的简写属性 |
| animation-name | 规定@keyframes动画的名称 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0 |
| animation-timing-function | 规定动画的速度曲线，默认是"ease" |
| animation-fill-mode | 规定当动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时)，要应用到元素的样式 |
| animation-delay | 规定动画何时开始，默认是0 |
| animation-iteration-count | 规定动画被播放的次数，默认是1 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是"normal" |
| animation-play-state | 规定动画是否正在运行或暂停。默认是"running" |
下面我们看一下之前写的案例代码的效果。
平移
我们了解了关于动画的规则后，就可以开始写一些页面常见的动画了。
关于平移的内容，给大家介绍一下2D方向的平移。
translate()方法：根据X轴和Y轴的位置给定的参数，从当前元素位置移动。
案例：当鼠标悬停在div元素时，5s内让它向下平移500像素
#app:hover {
animation: toTranslation 5s;
}
@keyframes toTranslation {
100% {
transform: translateY(500px);
}
}
X轴方向的平移同理，就不演示了。
旋转
我们实现的依然是2D方向的旋转。
rotate()方法：在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
案例：鼠标悬停在div元素时，让它5s内绕自身旋转一圈即360°
#app:hover {
animation: toRotate 5s;
}
@keyframes toRotate {
100% {
transform: rotate(360deg);
}
}
放大缩小
scale()方法：该元素增加或减少的大小，取决于宽度和高度的参数。
案例：鼠标悬停在div元素上时，在0.5s内，让它放大1.2倍
#app:hover {
animation: toScale .5s;
}
@keyframes toScale {
100% {
transform: scale(1.2);
}
}
倾斜
skew()方法：包含两个参数值，分别代表X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示相反方向倾斜。
- skewX():表示只在X轴(水平方向)倾斜
- skewY():表示只在Y轴(垂直方向)倾斜
案例：鼠标悬停在div元素时，1s内向X轴倾斜60°
#app:hover {
animation: toSkew 1s;
}
@keyframes toSkew {
100% {
transform: skewX(60deg);
}
}
3D旋转
之前给大家介绍过CSS3中实现2D旋转的rotate()方法。
只要稍加改动，即可实现3D旋转。
- rotateX()方法，围绕其在一个给定度数X轴旋转的元素
- rotateY()方法，围绕其在一个给定度数Y轴旋转的元素
案例：当鼠标悬停在div元素时，1s内围绕自身水平旋转360°
#app:hover {
animation: toRotateY 1s infinite;
}
@keyframes toRotateY {
100% {
transform: rotateY(360deg);
}
}
因为是案例要求水平旋转即围绕Y轴旋转，所以我们使用的是rotateY()方法。
过渡
CSS3提供了很好的样式过渡的解决方案，会使过渡变得很平滑。
CSS3过渡是元素从一种样式，逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容
- 指定要添加效果的CSS属性
- 指定过渡效果的持续时间
案例1：当鼠标悬停在div元素时，在2s内，让它的宽变为500px
#app {
transition: width 2s;
}
#app:hover {
width: 500px;
}
注意：如果未指定期限，transition将没有任何效果，因为默认值是0
指定的CSS属性的值更改时效果会发生变化
案例2：当鼠标悬停在div元素时，宽高均在2s内变为500px
要添加多个样式的变换效果，添加的属性由逗号分割。
#app {
transition: width 2s,height 2s;
}
#app:hover {
width: 500px;
height: 500px;
}
总结
在CSS3中新增加的关于动画相关的内容基本就是这些，总体来说不难，大部分都是直接调用方法加以参数就可以实现。没事的时候多复习复习就可以。学会了这些内容，完成常规前端的动画效果就很轻松了，将动画流程进行拆分基本都是由上面这几部分组成的。
QQ:505417246
微信:18331092918
微信公众号:Code程序人生
个人博客:https://Creator12333.github.io