CSS动画duration怎么调？

想让你的网页动起来吗？CSS动画的持续时间至关重要！本文详细讲解了如何使用 `animation-duration` 属性设置CSS动画的播放时长，让你的动画效果更加流畅自然。`animation-duration` 属性接受秒 (s) 或毫秒 (ms) 为单位的值，控制动画周期完成的时间。无论是单独设置，还是结合 `animation` 简写属性，本文都提供了清晰的代码示例和实用技巧，教你轻松掌握CSS动画时间控制，打造更具吸引力的用户界面。注意，必须指定单位，否则设置将无效！

animation-duration 属性用于设置CSS动画的持续时间，单位为秒（s）或毫秒（ms），默认值为0；必须指定单位，否则无效；可单独使用，如 animation-duration: 2s；也可在简写属性中与其他动画属性组合，如 animation: slideIn 1.5s ease-in-out infinite；多个动画时用逗号分隔对应时间，如 animation: fadeIn 2s, moveRight 4s, rotate 1s。

在CSS中，动画的持续时间通过 animation-duration 属性来设置，它定义了一个动画周期完成所需的时间。

基本语法

animation-duration 的值使用时间单位，通常是秒（s）或毫秒（ms）。默认值是 0，表示没有动画效果。

.selector {
  animation-duration: 2s; /* 动画持续2秒 */
}

常用单位说明

• s：秒，例如 0.5s、3s
• ms：毫秒，例如 500ms（等于0.5s）

注意：必须指定单位，否则属性将无效。

结合 animation 简写属性使用

通常 animation-duration 会和其他动画属性一起用在简写的 animation 属性中：

.element {
  animation: slideIn 1.5s ease-in-out infinite;
}

其中 1.5s 就是 duration 的值，表示这个动画每次运行需要 1.5 秒。

多个动画的持续时间设置

如果元素有多个动画，可以用逗号分隔每个动画的持续时间：

.multiple-animations {
  animation: fadeIn 2s, moveRight 4s, rotate 1s;
}

每个时间对应相应顺序的动画名称。

基本上就这些。只要记住给 animation-duration 设置一个带单位的时间值，动画就能按你期望的速度运行。

理论要掌握，实操不能落！以上关于《CSS动画duration怎么调？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！