Skip to main content

animation

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

快速上手​

/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

animation-name: none // 名字
animation-duration: 0s // 持续时间
animation-timing-function: ease // 运动曲线
animation-delay: 0s // 延迟时间
animation-iteration-count: 1 // 循环次数
animation-direction: normal // 播放方向
animation-fill-mode: none // 播放前/后的阶段样式
animation-play-state: running // 是否正在播放
animation-timeline (en-US): auto // 动画时间线（与滚动条相关）

参考​