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

动画：名称时长时间函数延迟次数方向