前端知识点Animation 动画
优质文章： 10分钟入门 CSS3 Animation
属性值
| 属性 | 可选值 | 描述 |
|---|---|---|
name | none, keyframe | 动画名称 |
duration | 0s | 动画时长，单位s或ms |
timing-function | ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2 ) | 动画速度曲线，三次贝塞尔 |
delay | 0 | 动画延迟时长，单位s或ms |
iteration-count | 1, n 或 infinite | 动画播放次数 |
direction | normal, reverse, alternate(动画应该轮流反向播放) | 是否轮流反向播放动画。 |
fill-mode | none, forwards, backwards, both | 规定当动画不播放时（完成或当延迟未开始播放），要应用到元素的样式 |
play-state | running, paused | 指定动画是否正在运行或已暂停。 |
animation-fill-mode: forwards
forwards：表示动画完成后，元素将保持最后一帧的状态。backwards：表示并不是动画完成后元素变回第一帧的状态，而是表示当设置了animation-delay时，在动画开始前的等待过程中，立刻给元素应用第一帧的状态。both：会同时应用forwards和backwards种规则，即在 · 时先应用第一帧的状态，结束时保持最后一帧的状态。reverse：与正常方向相反，即先to，再from。
animation 简写形式
animation: slidein 3s ease-in 1s infinite reverse both running;
但这种对书写顺序有一定要求（ delay 要写在 duration 后面，其他参数无顺序要求，css会通过传入的关键词识别）。
多个 animation 属性可用逗号分隔使用，e.g:
css
animation: drive 3s both infinite linear, jump 0.5s 1.2s ease-in-out infinite;animation: drive 3s both infinite linear, jump 0.5s 1.2s ease-in-out infinite;