帧动画

@keyframes 关键帧

🐳 ​ @keyframes 与 transition 区别 ??

• @keyframes 定义多帧动画 可以控制中间状态
• transsition 只能定义开始和结束状态

🔥值得注意

• 关键帧中的!important 会被忽略掉(忽略当前css属性语句)；
• 同一个关键帧设置相同的属性 不同值时后者生效 前者会被忽略 层叠属性

动画 animation

**animation**属性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-direction、animation-fill-mode和animation-play-state等属性组成的简写形式。

animation-name：动画名称 （一个或多个,隔开）；

animation-duration：动画执行周期所需时间；

animation-iteration-count：动画执行的次数

animation-play-state：动画状态

animation-timing-function：可选值（ease、ease-in、ease-in-out、linear、ease-out、setp、cubic-bezier）

语法规则

• 属性间指定的一组或多组动画，每组之间的动画逗号隔开

帧动画 8 over