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秒 */
}
注意：必须指定单位，否则属性将无效。
通常 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如何设置的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
614
收藏
