transition-delay 设置过渡延迟时间
transition-duration 设置完成过渡效果需要花费的时间
transition-timing-function 设置过渡效果的速度曲线
transition 设置过渡属性的复合写法
transform-origin 设置旋转元素的基点位置（不常用，了解即可）
transform-style 让转换的子元素保留3D转换（不常用，了解即可）
opacity 设置元素的透明度
@keyframes 设置关键帧动画
animation 设置动画属性
| 值 | 描述 || animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
animation-fill-mode : none | forwards | backwards | both
/*none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。 */
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform-origin: bottom right/* 设置旋转点，默认是中心点 */
参考
过渡是一种动画，是从一种状态过渡到另一种状态，在过渡前，浏览器会计算页面的新页面结构以及完成重绘，过渡会自动双向运行，因此只要状态一反转，反向动画就会被运行。如果我们不希望所有的元素属性受到影响，只希望作用到 box-shadow, transform ，那么可以改写为：
在指定带前缀的属性时， transition-property 本身也需要加上前缀。比如： transition: transform.25s 针对旧的版本，也就是WebKit浏览器，需要写成 -webkit-transition: -webkit-transform .25s ，即属性和作为值的属性均需要加上前缀，否则在旧版本的浏览器不起作用。
