animation属性

animation 属性是 CSS3 中用于设置元素动画效果的一个简写属性。下面列出了 animation 属性及其常用值：

动画属性

  • animation-name (必需)： 指定要应用的动画名称。

  • animation-duration (必需)： 指定动画完成所需的时间，单位可以是秒(s)或毫秒(ms)。

  • animation-delay (可选)： 指定动画开始前的延迟时间，单位可以是秒(s)或毫秒(ms)，默认值为 0。

  • animation-timing-function (可选)： 指定动画的速度曲线，常见值有 linear(匀速)、ease(逐渐加速和减速)、ease-in(逐渐加速)、ease-out(逐渐减速)、ease-in-out(加速和减速)。

  • animation-iteration-count (可选)： 指定动画播放的次数，可以是数字(指定次数)或 infinite(无限次)。

  • animation-direction (可选)： 指定动画是否应该轮流反向播放，常见值有 normal(正常播放)、alternate(反向播放)。

  • animation-fill-mode (可选)： 指定动画在执行时间之外应用的值，常见值有 none(保持动画开始前的状态)、forwards(保持动画结束后的状态)、backwards(保持动画开始前的状态)、both(开始和结束状态都保持)。

  • animation-play-state (可选)： 指定动画是正在运行还是暂停，常见值有 running(播放)、paused(暂停)。

示例

.example {
  animation: my-animation 2s linear 1s 3 normal forwards；
}

在这个例子中：

  • my-animation 是动画的名称。

  • 2s 是动画的持续时间。

  • linear 是动画的速度曲线。

  • 1s 是动画开始前的延迟时间。

  • 3 是动画播放的次数。

  • normal 表示动画正常播放。

  • forwards 表示动画结束后保持结束状态。

浏览器支持

不同浏览器对 animation 属性的支持程度不同，通常需要添加浏览器特定的前缀以确保兼容性。例如：

.example {
  -webkit-animation: my-animation 2s linear 1s 3 normal forwards；
  -moz-animation: my-animation 2s linear 1s 3 normal forwards；
  -o-animation: my-animation 2s linear 1s 3 normal forwards；
  animation: my-animation 2s linear 1s 3 normal forwards；
}

以上信息可以帮助你了解 animation 属性及其用法。

Top
×
×