css3新增--动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

动画通过 @keyframes 指定动画序列，通过百分比将动画序列分割成多个节点，在各节点中分别定义各属性。然后通过 animation 将动画应用于相应元素。

@keyframes 语法：

@keyframes 动画名{
    0%/from {
        动画样式起始状态
    }
    任意百分比 {
        css code ...
    }
    100%/to {
        动画样式终止状态
    }
}

关键属性

• animation-name 动画名称(必填)

• animation-duration 动画持续时间(必填)

• animation-timing-function

  • linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n)： 特定的贝塞尔曲线类型

• animation-delay 动画延迟（只是第一次）

• animation-iteration-count 重复次数

  • 1/2/3/4…

  • infinite 无限次

• animation-direction 动画是否重置后再开始播放

  • normal 动画每次都从 0% 的状态开始执行

  • alternate 动画从起点开始，往复运动

  • alternate-reverse 动画从终点开始，往复运动

• animation-fill-mode 动画执行完毕后状态

  • forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义） - 未实现，当前效果类似于 both。

  • backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

  • both 设置对象状态为动画结束或开始的状态，结束时状态优先

简写语法

.ele {
    animation: name duration timing-function delay iteration-count direction fill-mode;
}

name duration 是必填属性，其它的属性是都可选属性。

动画状态

animation-play-state 动画状态（running 执行 和 paused 暂停）

帧动画

在应用 CSS3 动画时，有个控制时间的属性 timing-function 。它的取值中除了常用到的 贝塞尔曲线 以外，还可以是 steps() 函数

steps(n,start/end)

​ 第一个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展示

​ 第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态(不用记,第二个参数不写就行)

注意: n 必须是正整数

动画监听

ele.addEventListener("animationend", myStartFunction);

动画的事件：

• animationstart - CSS 动画开始后触发

• animationiteration - CSS 动画重复播放时触发

• animationend - CSS 动画完成后触发

过渡监听

// 过渡只有监听结束的方法,  start 和 run 的监听方法在开发状态
d2.addEventListener('transitionstart',function () {
    console.log('过渡开始...');
})
d2.addEventListener('transitionrun', function() {
    console.log("过渡执行中");
});
d2.addEventListener('transitionend',function () {
    console.log('过渡结束...');
})