## css3动画
过渡：transition
2D 转换 transform
3D 转换 transform
动画：animation
## transition
1. 含义：中文含义是过渡 可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
(帧： 帧——就是影像动画中最小单位的单幅影像画面,相当于电影胶片上的每一格镜头。 一帧就是一副静止的画面,连续的帧就形成动画,如电视图象等)
2. 属性
transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
transition-duration: 1s; 过渡的持续时间。
transition-timing-function: linear; 运动曲线。属性值可以是：
linear 线性 ease 减速 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速
transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
格式：transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
eg：transition: all 3s linear 0s;
## transform 位移、旋转、变形、缩放
2D转换包括：缩放、移动、旋转。
1. 缩放：scale
格式： transform: scale(x, y);
eg: transform: scale(2, 0.5);
参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
取值：大于1表示放大，小于1表示缩小。不能为百分比。
2. 位移：translate
格式： transform: translate(水平位移, 垂直位移);
eg： transform: translate(-50%, -50%);
参数为百分比，相对于自身移动。
正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
3. 旋转：rotate (小火箭例子)
格式： transform: rotate(角度);
eg: transform: rotate(45deg);
参数解释：正值 顺时针；负值：逆时针。
4. 倾斜 skew
(1) skew(xdeg)
向横向倾斜指定度数
x取值为正，X轴不动，y轴逆时针倾斜一定角度
x取值为负，X轴不动，y轴顺时针倾斜一定角度
(2) skew(xdeg,ydeg)
纵向倾斜度数
y取值为正，y轴不动,x轴顺时针倾斜一定角度
y取值为负，y轴不动,x轴逆时针倾斜一定角度
3D 转换
1. 旋转：rotateX、rotateY、rotateZ
格式：
transform: rotateX(360deg); //绕 X 轴旋转360度
transform: rotateY(360deg); //绕 Y 轴旋转360度
transform: rotateZ(360deg); //绕 Z 轴旋转360度
2. 移动：translateX、translateY、translateZ
格式：
transform: translateX(100px); //沿着 X 轴移动
transform: translateY(360px); //沿着 Y 轴移动
transform: translateZ(360px); //沿着 Z 轴移动
3. 透视：perspective (近大远小)
作为一个属性，设置给父元素，作用于所有3D转换的子元素
作为 transform 属性的一个值，做用于元素自身。
## 动画 animation
1. 定义动画的步骤
（1）通过@keyframes定义动画；
（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
（3）在指定元素里，通过 animation 属性调用动画。
定义动画：（先定义，再调用）
@keyframes 动画名{
from{ 初始状态 }
to{ 结束状态 }
}
调用：
animation: 动画名称 持续时间；
animation属性的格式：animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
eg： animation: move2 4s;
steps()的效果--->钟表