CSS animation 属性参数详解

CSS animation 属性参数详解：

参数	描述	默认值
name	动画名称。	无
duration	动画持续时间。	0
timing-function	动画的缓动函数，控制动画的加速和减速。	ease
delay	动画开始前的延迟时间。	0
iteration-count	动画重复的次数。	1
direction	动画播放的方向。	normal
fill-mode	动画结束后元素保持的样式。	none
play-state	控制动画的播放状态。	running

具体解释：

• name：动画的名称，用于引用和控制动画。
• duration：指定动画的持续时间，可以使用秒 (s) 或毫秒 (ms) 为单位。例如：1s、500ms。
• timing-function：控制动画的缓动函数，有以下几种预定义的缓动函数：
  • ease：默认的缓动函数，提供平滑的加速和减速（慢-快-慢）（开始很慢，但是很快就加速到一个比较大的速度，时间过半就开始缓慢减速，直到最后减速为0）。
  • ease-in：动画开始时加速，结束时减速（慢进）。
  • ease-out：动画开始时减速，结束时加速（慢出）。
  • ease-in-out：动画开始和结束时都加速，中间减速（慢进慢出）。
  • linear：动画以恒定的速度播放，没有加速或减速（慢-快-慢）（开始慢，但是匀加速到一个速度大概时间到1/3的时候就保持这个速度直到最后1/3时间再均匀减速）。
• delay：指定动画开始前的延迟时间。例如：1s、500ms。可为负值，当为负值时候，理解为从第几秒开始播放。
• iteration-count：指定动画重复的次数。可以是数字（如 3）或特殊值：
  • infinite：动画无限次重复。
• direction：指定动画播放的方向，有以下两种值：
  • normal：动画按定义的顺序播放。
  • reverse：动画按相反的顺序播放。
  • alternate：动画按先正向，后反向的顺序交替播放。
  • alternate-reverse：动画按先反向，后正向的顺序交替播放。
• fill-mode：指定动画结束后元素保持的样式，有以下几种值：
  • none：动画结束后，元素恢复到动画前的样式。
  • forwards：动画结束后，元素保持动画结束时的样式。
  • backwards：动画结束后，元素保持动画开始时的样式。
  • both：动画结束后，元素保持动画开始和结束时的样式。
• play-state：控制动画的播放状态，有以下两种值：
  • running：动画正在播放。
  • paused：动画已暂停。

示例：

/* 定义一个动画 */
@keyframes example {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 在元素上应用动画 */
.element {
  animation: example 1s ease-in-out infinite;
}

上面代码将创建一个动画，使元素在 1 秒内从透明变为完全不透明，并无限次重复，缓动函数为 ease-in-out。