CSS动画

来达到动画的效果：transition和animation。
CSS Transition(过渡)被应用于元素指定的属性变化时，该属性经过一段时间逐渐的过渡到最终需要的值；而CSS Animation(动画)只是在应用时执行之前定义好的操作，它提供更细粒度的控制。
1.transition
transition属性是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值。
a、transition-property属性
该属性用来定义转换动画的CSS属性名称
b.transition-duration属性
该属性用来定义转换动画的时间长度，即从旧属性换到新属性花费的时间，单位为秒。
c.transition-delay属性
该属性用来定义过渡动画的延迟时间
d.transition-timing-function属性
该属性用来定义过渡动画的效果
取值如下：ease（缓解效果）、linear（线性效果）、ease-in（渐显效果）、ease-out（渐隐效果）、ease-in-out（渐显渐隐效果）、cubic-bezier（特殊的立方贝塞尔曲线效果）
注意该属性有简写形式：{transition-property transition-duration transition-timing-function transition-delay}
特点：（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
2.animation属性
首先，该属性需要指定动画一个周期持续的时间，以及动画效果的名称，我们还需要keyframes关键字，定义rainbow效果
该属性是一个复合属性，简化版属性:{animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction}，具体来看一下每个属性的含义
a.animation-duration属性
该属性用来定义CSS动画播放的时间
b.animation-timing-function属性
该属性用来定义CSS动画的播放方式
c.animation-delay属性
该属性用来定义CSS动画开始播放的时间，是延迟还是提前等
d.animation-iteration-count属性
该属性用来定义CSS动画的播放次数
e.animation-direction属性该属性用来定义CSS动画的播放方向
普及一下tranform
3.transform属性
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换
transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。转换是使元素改变形状、尺寸和位置的一种效果，您可以使用2D或3D转换您的元素。
2D转换方法：
a.tranlate（）
通过该方法，元素从其当前位置移动，根据给定的left（x坐标）和top（y坐标）位置参数
例如：div{transform：translate（50px，100px）；}表示把元素从左侧移动50像素，从顶端移动100像素。
b.rotate（）
通过该方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
例如：div{transform：rotate（30deg）；}表示把元素顺时针旋转30度。
c.scale（）
通过该方法，元素的尺寸会增加或减少，根据给定的宽度（x轴）和高度（Y轴）参数
例如：div{transform：scale（2,4）；}表示把宽度转换为原始尺寸的2倍，把高度转换为原始高度的4倍。
d.skew（）
通过该方法，元素翻转给定的角度，根据给定的水平线（x轴）和垂直线（Y轴）参数
例如：div{transform：skew（）}