animation属性
简介
animation即动画，如果说transition是通过初始与终止两个状态来实现平滑过渡的动画效果的，那么animation就是通过关键帧
@keyframes来实现更为复杂的动画效果。animation是一个复合属性，因此需要熟练掌握animation的属性。
定义
animation的属性
①animation-duration
指定一个动画周期的时长，默认值为0s，即无动画。
若指定的属性值为animation-duration:1s,2s,5s时，执行最后一个,即动画周期将持续5s。
②animation-timing-function
定义CSS动画在每个动画周期中的执行的节奏，而所谓的节奏用两个图例对比解释应该很容易理解。
animation-timing-function的属性值为linear时，会规定以相同的速度开始至结束的过渡效果。
animation-timing-function的属性值为ease-in-out时，会规定以慢速开始和结束的过渡效果。
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
|---|---|
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
animation-time-function的属性值，从这个表可以看出，实际上决定动画过渡效果的是cubic-bezier贝塞尔曲线。这里按下不表，有兴趣的同学可以了解这一篇文章。
实用的 CSS — 贝塞尔曲线(cubic-bezier) - SegmentFault 思否
③animation-delay
顾名思义，定义动画何时开始。
需要注意的是，若定义一个负值（-1s），那么就会从它的动画序列的第1s开始。
④animation-iteration-count
定义动画结束前运行的次数
/* 值为关键字 */
animation-iteration-count: infinite;
/* 值为数字 */
animation-iteration-count: 3;
animation-iteration-count: 2.4;
/* 指定多个值 */
animation-iteration-count: 2, 0, infinite;//没用，只能使用指定的第一个值
⑤animation-direction
顾名思义，定义动画的方向。 。 属性值的可能取值有normal，alternate，reverse，alternate-reverse。
默认值是normal，每个循环内动画向前运动，结束后返回到起点。alternate则是从终点折返到起点，再运动到终点。
⑥animation-fill-mode
定义CSS动画在执行之前和之后如何将样式应用于其目标。
/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;//动画保留执行期间遇到的最后一个关键帧的计算值
animation-fill-mode: backwards;//动画将在应用于目标后立即应用第一个关键帧的值
animation-fill-mode: both;
⑦animation-play-state
定义动画的状态。
属性值的可能取值有playing，paused。
值得注意的是，若state为paused，那么恢复一个已暂停的动画，动画将在它结束的位置重新开始。
⑧animation-name
定义动画的名字，下面是一个应用实例。
@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
animation: 3s ease-in 1s 2 reverse both paused slidein;
transform属性
简介
只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。
transform-origin指定原点的位置，默认值是元素的中心。所有的形体变换如旋转，缩放，倾斜都要以此作为参照。
定义
①translate
translate:该变换由二维向量构成，它的坐标定义了元素在每个方向上移动了多少。
translate:100px 100px;//沿x轴移动100px，y轴移动100px
translateX:10%;//沿x轴移动自身宽度的10%
translateY:200px;
②scale
scale:确定在一个方向上缩放了多少
//沿x,y轴缩小为50%
transform: scale(0.5)
//沿x,y轴缩小为50%,40%
transform: scale(0.5,0.4)
③rotate属性
rotate:旋转角度，单位为deg(度)
transform: rotate(30deg)//以原点为旋转中心旋转30度
transform: rotate(0.5turn)//以原点为旋转中心旋转半个turn也就是180度
④skew属性
skew:即倾斜角度，单位为deg(度)。
它在水平和垂直方向上将单元内的每个点扭曲一定的角度。
transition属性
| 属性 | 介绍 |
|---|---|
transition-property | 元素的哪一个属性将用过渡表现。例如, opacity,color。默认值是all。 |
transition-duration | 元素过渡过程持续时间。例如，1s。默认值是0s。 |
transition-timing-function | 元素过渡时的速率函数。例如, linear、 ease-in、steps动画分段函数或自定义的 cubic-bezier 函数)。默认值是ease，中间快，两头慢。 |
transition-delay | 元素过渡延迟的时间。例如，1s。默认值是0s。 |
transition-property、transition-duration、transition-delay这三个transition属性中的每个属性都支持多个参数值，参数值之间用逗号分隔，这样能够用一个样式规则制定多种CSS属性的变化。需要注意的是，每个transition属性中的多个参数值的顺序一定要一致。
当transition结束后，transitionEnd事件会在CSS transition动画结束后触发。
同样，animationend 事件会在一个 CSS 动画完成时触发（不包括完成前就已终止的情况，例如元素变得不可见或者动画从元素中移除）。
CSS动画总结
优点：简单，高效，声明式的。不依赖于主线程，采用硬件加速GPU简单的控制keyframe animation的播放和暂停
缺点：不能动态修改或定义动画内容，不同的动画无法同步与堆叠
适用于简单h5展示页面
