HTML中的触发动画和主动动画
触发式动画
常用触发动作
1：鼠标悬浮（：hover）
2：选项选中（：checked）
3：输入框点击（：active）
… …
触发式(过渡)动画原理之动画参数
过渡动画时间：transition-duration。
定义一个动画从第一帧到最后一帧的动画时间，浏览器会根据该时间生成对应数量的中间帧数
例：
1：transition-duration:0.5s; 帧数=0.5s60帧/s=30帧
2：transition-duration:5s; 帧数=5s60帧/s=300帧
过渡动画延迟：transition-delay
定义动画从触发动作执行的一瞬间，延迟多长时间开始展示动画，默认延迟为0，即动作一执行立马就展示动画
例：
1：transition-delay：1s; 那么动画会在动作执行的1s后开始执行
过渡动画时间函数： transition-timing-function
定义动画从第一帧到最后一帧变化过程的速率变化
注:贝塞尔曲线 http://cubic-bezier.com
过渡动画属性： transition- property
定义元素是以某个属性的变化作为动画的变化效果(如,宽度的变化, 高度的变化等), 第一帧和最后一帧代表的就是该属性的值的变化(比如width的值从第一帧的100px,到最后一帧的500px)
复合写法：过渡动画综合属性：属性名称 过渡时间 过度动画时间函数 动画延迟时间;
定义元素是以某个属性的变化作为动画的变化效果(如,宽度的变化, 高度的变化等), 第一帧和最后一帧代表的就是该属性的值的变化。
主动式动画
**主动式动画：**由用户自行创造关键帧，无需任何的动作触发，与触发式动画的不同：用户可以自行创造多个关键帧，用来更加精细化的控制动画的整个过程
**动画激活：**给需要展示用户自行创造的主动式动画的元素加上animation-name（动画-名称）样式
主动式动画名称：animation-name:;
@keyframes onepiece{}/* 创造了名为onepiece的动画 */
div.animte{
animation-name:onepiece;/将该动画赋予给div元素展示/
}
主动式动画时间定义一个动画从第一帧到最后一帧的动画时间，浏览器会根据该时间生成对应数量的中间帧数：animation-duration
主动式动画时间函数： animation-timing-function
时间函数：定义动画从第一帧到最后一帧变化过程的速率变化（参照贝塞尔曲线）
主动式动画时间延迟： animation-delay
定义动画从触发动作执行的一瞬间，延迟多长时间开始展示动画，默认延迟为0，即动作一执行立马就展示动画
主动式动画播放次数： animation-iteration-count
规定动画被播放的次数。默认是 1。
infinite:无限循环 。
主动动画原理之多次播放动画时的的正反方向
animation-direction：规定动画是否在下一周期逆向地播放。
默认是 “normal”,每一次都是正向播放
revers为负方向。
复合写法：
animation: name duration timing-function delay iteration-count direction
动画：名称 时长 时间函数 延迟 次数 方向
