CSS 动画 animation属性 @keyframes

{
  ···
  animation: 动画名称 时长 [过渡函数] [延迟] [播放次数] [播放方向] [样式应用模式];
}
@keyframes 动画名 {
	0% {},
	100% {}
	/**
	from: {},
	to: {}
	*/
}

@keyframes 应以一段动画，可在不同百分比时间处设置关键帧(此时的样式值)
from 和 to 分别等价于 0% 和 100%

animation-timing-function 关键帧过渡函数

• linear 线性
• ease(舒缓 默认 整体上还是先快后慢) * * *
• ease-in(缓入)
• ease-out(缓出)
• ease-in-out
• cubic-bezier(n,n,n,n)(贝塞尔曲线)
• steps(number_of_steps, direction)（阶跃缓动函数）
  jump-start / start | jump-end / end | jump-none | jump-both

animation-fill-mode 样式应用模式

在动画执行之前和之后 样式规则
none 会保持原来的样式
forwards 保留由执行期间遇到的最后一个关键帧的样式
backwards 在动画延时开始时，应用第一个关键帧的样式
both 遵循forwards和backwards

animation-delay 延迟

延时播放动画
s 或是 ms

animation-iteration-count 播放次数

规定动画播放次数
数字 或是 infinite（无限）

animation–play-state 播放状态

running 播放 默认
paused 暂停
可用于暂停动画 object.style.animationPlayState="paused"

animation-direction 播放方向

normal 正常播放
reverse 反向播放
alternate 先正向播放，每次播完后调转方向
alternate-reverse 先反向播放，每次播完后调转方向