CSS动画指：将元素从一种样式平缓地（而非跳跃式地）变为另一种样式。
CSS实现动画有两种方式：animation自定义动画、transaction过渡动画

animation和@keyframes的组合可以为元素定义动画。transform提供了元素实现2D、3D转换的功能

CSS（六）动画

CSS动画使元素逐渐从一种样式变为另一种样式。CSS自定义动画需要两个属性的结合，分别是：animation（将动画绑定到指定元素，并设置动画属性）、keyframes（定义变化规则）

一、animation动画

animation 属性是一个简写属性，用于设置六个动画属性

animation: name duration timing-function delay iteration-count direction

animation属性	说明
animation-name	动画名称，对应keyframes
animation-duration	动画持续时间，默认0s（不发生动画）
animation-delay	动画开始的延迟时间，支持负值（表示已播放多久）
animation-iteration-count	运行次数 取值范围：数字 | infinite
animation-direction	动画播放方向 取值范围：normal | reverse(由后向前) | alternate(来回往复) | alternate-reverse
animation-timing-function	播放速度曲线 取值范围：ease | linear | ease-in | ease-out | ease-in-out
animation-fill-mode	动画前后是否影响样式 取值范围：none(默认) | forwards(保持最后一帧的样式) | backwards(保持第一帧的样式) | both
animation	以上所有属性的简写属性

示例见【前端练习】

二、transform变换

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

/* 语法 */
transform: none | transform-functions;

2.1、2D转换

2D转换包括：元素的移动、旋转、缩放、倾斜。2D转换方法包括如下：

方法	描述
rotate()	根据给定的角度顺时针或逆时针旋转元素，角度单位为deg(度)
transform-origin	设置元素转换的基点位置，默认值：50%, 50%, 0，第三个参数表示Z轴位置 例如：transform-origin: 20% 40%;
translate()	从其当前位置移动元素。 例如：translate(40px,60px)，从当前位置向右移动40px，向下移动60px
translateX()	沿X轴移动元素
translateY()	沿Y轴移动元素
scale()	增加或减少元素的大小（根据给定的宽度和高度参数） 例如：scale(2,3)，将元素增大为原始宽度的2倍，原始高度的3倍
scaleX()	增加或减少元素的宽度
sacleY()	增加或减少元素的高度
skew()	使元素沿 X 和 Y 轴倾斜给定角度 例如：skew(20deg, 10deg)，沿X轴倾斜20度，沿Y轴倾斜10度
skewX()	使元素沿X轴倾斜给定角度，单位为deg(度)
skewY()	使元素沿Y轴倾斜给定角度，单位为deg(度)
matrix()	把以上方法（除了rotate、transform-origin）组合为一个

/* matrix()语法 */
matrix(scaleX(), scaleY(), skewX, skewY, translateX(), translateY())

/* 示例 */
transform: matrix(1, -0.3, 0, 1, 0, 0);

所有示例请见【前端练习】

2.2、3D转换

方法	说明
rotate3d(x,y,z)	绕X、Y、Z轴旋转元素
backface-visibility	定义元素背面是否可见（绕X/Y轴旋转时可能会露出背面）
translate3d(x,y,z)	沿X、Y、Z轴移动元素
scale3d(x,y,z)	沿着X、Y、Z轴缩放元素
matrix3d()	参数是一个描述3维空间的4x4矩阵，转换需要对矩阵知识很熟悉，详细可参考：matrix3d详解-CSDN博客
transform-origin	这个不是方法，是属性，定义元素转换的基点位置 例如：transform-origin: 50% 50% 0（默认值）

translate3d和ratate3d的示例见【前端练习】

三、transition过渡

在不使用transition时，若通过用户的交互（如鼠标悬浮、点击等等）直接改变css样式属性，呈现的形式是立刻转变，但有时我们希望这个变化是有过渡效果的，这时就可应用transition过渡动画了。

transition 属性是一个简写属性，用于设置四个过渡属性：

属性	说明
transition-property	设置过渡效果的CSS属性的名称 取值：none(没有属性) | all(所有属性，默认值) | property(指定属性)
transition-duration	设置过渡效果持续的时间，必须设置，否则默认为0，体现不出过渡效果
transition-timing-function	过得到效果速度曲线
transition-delay	设置过渡到延迟

提示：过度效果通常在元素状态发生变化时发生，如鼠标悬浮