css-帧动画

什么是帧动画？

通过定义一段动画中的关键点、关健态来创建动画。Keyframes相比transition对动画过程和细节有更强的控制。

---

关键帧

使用@kerframes规则配置动画的各个帧。

• from 表示起点 (若省略，css会以默认状态帮你创建)
• to 表示终点 (若省略，css会以默认状态帮你创建)
• 可以用百分数 如20%来控制动画运行到20% 时候的精确状态

基本使用

<style>
    div {
    animation-name:hd;
    animation-duration:3s;    
    }

    @keyframes hd {
    from {
        opacity: 0;
        transform: scale(.1);
    }
    to {
        opacity:1;
    }
    }
</style>

同时声明

25%，
75% {
    background: #9b59b6;
    border-radius:50%;
}
/*同时为 25% 和 75% 两个状态设置的背景和圆角

使用动画

使用animation-name 规则可以在元素身上同时作用多个动画。

• 多个动画逗号隔开
• 多个动画有相同属性时，后面动画的属性优先使用

---

动画时间

使用animation-duration可以声明动画播放的时间，也就是说把所有帧执行一遍的时间。

• 可以使用m秒，代表毫秒
• 可以为不同的动画设置单独的时间，逗号隔开
• 如果动画数量大于时间数量，将重新从时间列表中计算

---

属性叠加

如果多个帧动画设置了相同的属性，不同的浏览器对待的方式略有不同。比如chrome/edge对动画的计算就有区别。

• 例子：属性叠加

所有建议尽量不要在两个动画中控制相同的属性。

---

动画属性

不是所有的css都有过度效果。 一般来讲，有中间值的属性都可以设置。

重复动画

使用animation-iteration-count规则设置动画重复执行的此时。 infinite表示无线循环。

• 例子：心动感觉

---

动画方向

使用animation-direction控制动画运行的方向

选项	说明
normal	从0到100%运行动画
reverse	从100%到0运行动画
alternate	先从0到100%，再从100%到0%
alternate-reverse	先从100%到0，再从0到100%

• 例子：心动效果比较

---

延迟动画

使用animation-delay规则定义动画等待多长时间后执行。

• 例子：微场景

动画速率

animation-time-function：贝塞尔曲线，与之前transform介绍的一样。

• 例子：按钮提交

---

步进速度

过渡使用阶梯化程序。
animation-time-function：step(n,start) 同transform

播放状态

animation-play-state 控制动画暂停与运行

选项	说明
paused	暂停
running	运行

• 例子：幻灯片

填充模式

animation-fill-mode用于定义动画播放结束后的处理模式，时回到原来状态还是动画停止时的状态。

选项	说明
none	需要等延迟结束，起始帧属性才应用
backwards	动画效果在起始帧，不等延迟结束
forwards	结束后停留动画的最后一帧
both	包含backwards和forwards规则，开始时起始帧，结束时停留在最后一帧。

组合定义

animation：

• animation-name
• animation-duration
• animation-time-function
• animation-delay
• animation-iteration-count
• animation-direction
  必须设置animation-duration，否则过度时间为0