持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情
- 补间动画：自动完成从其实到终止状态的过渡。不用管中间状态。
- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。
一、过渡：transition
CSS3的新特性，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
transition属性：
- transtion-property:all; 如果希望所有的属性都发生过渡，就使用all。
- transition-duration:1s;过渡的持续时间。
- transition-timing-function:linear;运动曲线。属性值可以是：
-
- linear 线性
- ease 减速
- ease-in 加速
- ease-out 减速
- ease-in-put 先加速后减速
- cubic-bezier 自定义速度模式，可以使用工具网站定制
- transtion-delay:1s; 过渡延迟。多长时间后再执行这个过渡动画。
上面四个属性可以写成综合属性：
transition: 让哪些属性过渡 过渡的持续时间 运动曲线 延迟时间；transition: all 3s linear 0s;
1、目前，各大浏览器都支持无前缀的transition。
2、不是所有CSS属性都支持transition，完整的列表。
3、transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。
局限：
1、需要时间触发，所以没法在网页加载时自动发生；
2、一次性的，不能重复发生，除非再次触发；
3、只能定义开始状态和结束状态，不能定义中间状态；
4、一条规则只能定义一个属性的变化，不能涉及多个属性。
二、转换transform
CSS3的新特性，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。转换再配合过渡和动画，可以取代早期只能靠Flash才可以实现的效果。
通过transform转换实现2D或者3D的转换
2D转换包括：缩放、移动、旋转
1、缩放scale
格式：transform:scale(x, y) x表示水平方向的缩放倍数；y表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
取值：>1表示放大，<1表示缩小。不能为百分比。
2、位移：translate
格式：transform:translate(水平位移,垂直位移)
参数：参数为百分比，相对于自身移动。
正值：向右或向下。负值：向左或向下。如果只写一个值，则表示水平移动
3、旋转：rotate
格式：transform:rotate(角度);
参数：正值 顺时针；负值 逆时针。
3D转换
1、旋转：rotateX、rotateY、rotateZ
格式：transform:rotateX(360deg)
transform:rotateY(360deg)
transform:rotateZ(360deg)
2、移动：translateX、translateY、translateZ
格式：transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px);
3、透视：perspective
电脑显示屏是一个2D平面，通过透视实现图像具有立体感的3D效果。
格式：作为一个属性，设置给父元素，作用于所有3D转换的子元素。
作为transform属性的一个值，作用于元素自身。
4、3D呈现：transform-style
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：
transform-style: preserve-3d; //让 子盒子 位于三维空间里
transform-style: flat; //让子盒子位于此元素所在的平面内（子盒子被扁平化）
三、动画animation
CSS3的新特性，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
1、定义动画的步骤
（1）通过@keyframes定义动画；
（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
（3）在指定元素里，通过animation属性调用动画。
定义动画：
@keyframes 动画名{
form{
初始状态
}
to{
结束状态
}
}
调用：
animation:动画名称 持续时间；
animation属性的格式：
animation:定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。
2、动画属性
animation是综合属性
（1）动画名称：animation-name: move;必选项，且顺序固定
（2）执行一次动画的持续时间：animation-duration: 4s;必选项，且顺序固定
（3）动画的执行次数：animation-iteration-count: 1; 属性值为infinite表示无数次
（4）动画的方向：animation-direction: altername; 属性值：normal正常，alternate反向
（5）动画延迟执行：animation-delay: 1s;
（6）设置动画结束时，盒子的状态：animation-fill-mode: forwards; 属性值：forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。
（7）运动曲线：animation-timing-function: ease-in; 属性值：linear ease-in-out steps()等
属性值如果写成steps(),则表示动画不是连续执行，而是间断的分几步执行。我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。
