动画过渡效果
transition: 允许css属性值在一定的时间区间内平滑的过渡。（过渡动画）
transition作用是指定了某一个属性（如width、left、transform等）在两个值之间如何过渡。\
这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。
如果某一个元素指定了Transition,那么当其某个属性改变的时候就会按照Transition指定的方式进行过渡，动画就这么产生了。
transition主要包含四个属性值：
(1) 执行变换的属性：transition-property;
(2) 变换延续的时间：transition-duration;
(3) 在延续时间段，变换的速率变化：transition-timing-function //例：平缓进入、先快后慢；
(4) 变换延迟时间： transition-delay
需要事件的触发，例如单击、获取焦点、失去焦点等。
语法：transition: property duration timing-function delay;
例如：transition: width 2s ease 0s;
不足
- 需要事件触发，所以没法在网页加载时自动发生
- 是一次性的，不能重复发生，除非一再触发
- 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态
Animation：也是通过指定某一个属性（如width、left、transform等）在两个值之间如何过渡来实现动画的。
在官方的介绍中这个属性是transition属性的扩展，弥补了transition的很多不足
与Transition不同的是：
1.Animation可以通过keyframe显示控制当前帧的属性值，而Transition只能隐式来进行（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活。
2. Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transiton确实改变了元素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别。
3. 网页加载时可自动发生，不需要事件触发
调用动画
- animation: 动画名称 动画时间 动画速度 动画延迟 动画次数 动画方向 动画播放状态 动画完成时的状态
- 动画名称: animation-name
- 动画时间 animation-duration
- 动画速度 animation-timing-function: linear（匀速变化） ease（低俗开始，然后加快，快结束的时候再放慢） ease-in（低速开始） ease-out（低速结束） ease-in-out（低俗开始，低速结束） steps()
- 动画延迟 animation-delay
- 动画次数 animation-iteration-count: infinite
- 动画方向 animation-direction:
- 动画播放状态: animation-play-state: running pause
- 动画完成时的状态: animation-fill-mode:forwards backwards
配合动画的属性 Transform-变形
1.transform字面的意思就是变形的意思，在CSS3中，transform支持的几个操作有
（1）旋转rotate、
（2）扭曲skew、
（3）缩放scale
（4）移动translate
（5）矩阵变形matrix。
2.transform不会触发回流，和重绘。
transform各操作使用介绍
1.rotate(xx deg)(2D), rotateX()(3D), rotateY()(3D)：以中心为基点，deg表示旋转的角度，为负数时表示逆时针旋转。
2.translate(x,y) ，translateX(x) ，translateY(y)：以中心为基点按照设定的x,y参数值,对元素进行进行平移。
3.scale(x,y)，scaleX(x,1)， scaleY(1,Y)：缩放基数为1，如果其值大于1元素就放大，反之其值小于1为缩小。
4.skew(x,y)， skewX(x)， skewY(y)：以中心为基点，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。
基点
1.所有操作的默认的基点都在中心位置，我们可以使用transform-origin：(x,y)来改变元素基点。
x可以取left，center ，right，是水平方向取值，也可以取对应的百分值为left=0%;center=50%;right=100%
y可以取top ，center， bottom，是垂直方向的取值，其中top=0%;center=50%;bottom=100%;
transform布局不会脱离文档流，也不改变文档流的大小和位置，不会影响布局 以下值都不会改变
变形，即修改元素自身的坐标空间。这个修改实际对应了一个坐标系统映射转换的矩阵。通过变形变换，元素可以实现在二维或三维的空间内的旋转、偏移、缩放和倾斜。
虽然是关于坐标系统，但变换改变的只是元素的视觉渲染，那是在元素的布局计算后起作用的，因此在布局层面没有影响。
- width
- offsetWidth
- clientWidth
- offsetLeft
- ...
常见的触发硬件加速的css属性： 不会触发回流
- transform
- opacity
- filters
- Will-change
重点
- 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
- 对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。
css3硬件加速的坑
- 如果你为太多元素使用css3硬件加速，会导致内存占用较大，会有性能问题。
- 在GPU渲染字体会导致抗锯齿无效。这是因为GPU和CPU的算法不同。因此如果你不在动画结束的时候关闭硬件加速，会产生字体模糊。
