### 动画三要素
1. 过渡( transition )
知道动画的起始状态与终止状态，简单过渡时使用CSS过渡
2. 变形( transform )
想要在视觉上改变某个元素但又不想影响页面布局时使用CSS变形
3. 动画( animation )
在一个元素上执行一系列关键帧动画时，使用CSS动画
### 1. 过渡：transition
1. transition-property：过渡属性：all、none、property-name，不是所有属性都可以过渡的
2. transition-duration：过渡持续时间：.5s 500ms
3. transition-timing-function：过渡函数：ease ease-in ease-out ease-in-out
cubic-bezier(0.1, 0.7, 1.0, 0.1) step-start step-end step( 4, start || end )
4. transition-delay：过渡延迟时间：.5m 500ms
5. transition：all .5s ease 500ms; 过渡属性 过渡时间 过渡函数 过渡延时
### 1. 过渡：transition对多个属性应用不同时间
```
div {
width:200px;
height:200px;
background: orange;
text-align: center;
color: white;
}
div:hover {
width: 300px;
height: 300px;
color: red;
transition-property: width, height, color;
transition-duration: .5s, 2s, 5s;
}
```
### 2. 变形：transform
1. transform：scale(.5 || 1.5，2)：2D大小变换
2. transform：translate( x, y )：px || %比 x，y轴移动，只传入一个值：x轴移动
translateX() || translateY() || translateZ()
```
在相对定位的父盒子中，子元素实现上下左右垂直居：原理：子元素定位到父盒子一半宽高的位置，再偏移自己宽高的一半
div.inner {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
3. transform：rotate( 3600deg )：360deg为一圈，负数逆向旋转
4. transform：skew( 30deg，40deg ) || skewX() || skewY()：斜切
5. transform-origin：top right || 50px：改变变换原点
### 3. 动画：animation
1. animation-fill-mode：forwards：保留动画结束帧时样式，backwards：动画第一帧样式，默认会变为白色
2. animation-duration：动画持续时间：.5s 500ms
3. animation-name：动画名称，可定义多个动画名
4. animation-delay：动画开始延迟时间
5. animation-direcion：动画方向：reverse || alternate-reverse || alternate
6. animation-iteration-count：动画运动次数：infinity || time || 3.5
7. animation-play-state：控制动画状：running || paused
8. animation-timing-function：动画运动函数
9. animation：name duration timing-function delay count direction fill-mode play-state
### @keyframes
1. 动画内的关键帧时间顺序可以自由定制，CSS会自动按照%比阶段去触发
2. WebKit内核的浏览器（iOS，Safari）对 from 和 to 的支持不是十分好，建议使用%比
@keyframes animation-name {
from: { css样式 }，
5%: { css样式 }，
50%: { css样式 }，
to: { css样式 }
}
