在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。
CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ；
transform 可以用来设置元素的形状改变，主要有以下几种变形： rotate （旋转）、 scale （缩放）、 skew （扭曲）、 translate （移动）和 matrix （矩阵变形），语法如下：
none 表示不做变换； <transform-function>表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在 () 里面，用 空格 分开，例如：
所有的变形都是基于基点，基点默认为元素的中心点。用法： transform-origin: (x, y) ，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用 left 、 center 、 right ；y 可以用 top 、 center 、 bottom 。
用法： rotate(<angle>) ；表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转，例如：
它有三种用法： scale(<number>[, <number>]) 、 scaleX(<number>) 和 scaleY(<number>) ；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。
移动也分三种情况： translate(<translation-value>[, <translation-value>]) 、 translateX(<translation-value>) 和 translateY(<translation-value>) ；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位： px 、 rem 等
扭曲同样也有三种情况， skew(<angle>[, <angle>]) 、 skewX(<angle>) 和 skewY(<angle>) ；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。
矩阵变形相对来说非常复杂，涉及到数学中的矩阵计算，有兴趣的同学可以研究一下： CSS3 Transform Matrix
transition 是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：
它是用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值：
它是用来设置转换过程的持续时间，单位是 s 或者 ms ，默认值为0；
它是来设置过渡效果的速率，它有6种形式的速率：
它是来设置过渡动画开始执行的时间，单位是 s 或者 ms ，默认值为0；
它是 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 的简写：
animation 比较类似于 flash 中的 逐帧动画 ，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而 transition 只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由 关键帧 组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性 keyframes 来完成逐帧动画的。
它是用来设置动画的名称，可以同时赋值多个动画名称，用 , 隔开：
它是用来设置动画的持续时间，单位为 s ，默认值为 0 ：
和 transition-timing-function 类似：
它是来设置动画的开始时间，单位是 s 或者 ms ，默认值为0：
它是来设置动画循环的次数，默认为 1 ， infinite 为无限次数的循环：
它是来设置动画播放的方向，默认值为 normal 表示向前播放， alternate 代表动画播放在第偶数次向前播放，第奇数次向反方向播放：
它主要是来控制动画的播放状态： running 代表播放，而 paused 代表停止播放， running 为默认值：
它是 animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction 的简写：
关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了，让我们回顾一下。 transform 我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变； transition 和 animation 它们很像 flash 中的 补间动画 和 逐帧动画 ； transition 是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等； animation 的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。
过渡（transition）
多个属性间使用,隔开
如果所有属性都需要过渡，则使用all关键字
大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡（auto不是有效数值，过渡动画效果不会生效）
时间单位：s 和 ms 1s = 1000ms
指定过渡的执行的方式
可选值：
transition-delay: 2s
可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发, 动画可以自动触发动态效果。
关键帧语法：
animation-name: 要对当前元素生效的关键帧的名字
animation-name: test
animation-duration: 4s
animation-delay: 2s
可选值：
可选值：
可选值：
可选值：
animation: test 2s 2 1s alternate 和transition 的简写类似 ，执行时间和延时时间顺序注意
变形就是指通过CSS来改变元素的形状或位置.
变形不会影响到页面的布局
transform 用来设置元素的变形效果
transform: translateY(-100px)
平移：平移元素，百分比是相对于自身计算的(px,100%)
z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果
, 必须要设置网页的视距
/* 设置当前网页的视距为800px，人眼距离网页的距离 */
perspective: 800px
通过旋转可以使元素沿着x y 或 z旋转指定的角度 开视距效果明显
rotateX()
rotateY()
rotateZ()
单位 角度 deg、 n turn（圈）
**是否显示元素的背面 **
backface-visibility: hidden
transform 不会使DOM脱离文档流，当通过 translateX 等属性值移动了元素后，它仍然占据原来的位置。好处是， transform 制作的动画会直接进入合成阶段，避开重排重绘，可以通过 Performance 录制面板来查看 transform 动画的效率。
MDN animation
深入浅出CSS动画
MDN animate()
监听 CSS animation 动画的事件:
这些监听事件对 animate() 是无效的。
页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的，可能很多，也可能很少，如果公告内容的宽度没有超过最大宽度限制，那么就不应该轮播，如果超过了，则发起轮播。
假设我们永远只有一条最新的公告
原理：当一次动画执行结束时，影子内容的头部刚好对准轮播内容的初始位置，那么下次动画开始时，轮播内容将重新回到初始位置，由于影子内容与轮播内容相同，那么就给人造成一种无限轮播的错觉。
逻辑实现：父元素设置了 overflow: hidden ，又想要获取父元素、子元素的真实宽度，那么可以通过 scrollWidth 获取。
兼容性：如果不支持 animate() ，那么我们可以动态创建 <style>+ @keyframes ，插入 <head>, 但也要记得移除。
