animation-duration用于设置动画周期时长，语法为animation-duration:时间值；需配合@keyframes和animation-name使用，如animation-duration:2s表示动画持续2秒，常见取值有1s、0.3s、5s等，默认值为0s动画不播放。
在CSS中，animation-duration 属性用于设置动画完成一个周期所需要的时间。你可以通过它精确控制动画播放的快慢。
基本语法
animation-duration: 时间值;
时间值可以使用秒（s）或毫秒（ms）单位。常用的是秒，比如 1s 表示1秒，0.5s 表示半秒。
如何设置动画时长
将 animation-duration 与 @keyframes 和 animation-name 配合使用：
立即学习“前端免费学习笔记（深入）”；
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 
先定义关键帧动画（@keyframes） 用 animation-name 指定动画名称 用 animation-duration 设置持续时间
例如：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
.box {
animation-name: slide;
animation-duration: 2s;
}
这个例子中，元素会在2秒内从原位置向右移动200px。
常见取值示例
animation-duration: 1s; — 动画持续1秒 animation-duration: 0.3s; — 快速动画，适合微交互 animation-duration: 5s; — 缓慢动画，适合背景过渡 animation-duration: 0s; — 瞬间完成，常用于触发状态变化
注意：如果未设置 animation-duration，默认值是 0s，意味着动画不会播放。
基本上就这些，合理设置 duration 能让动画更符合用户体验节奏。
以上就是css animation-duration如何控制动画时长的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1031508.html
微信扫一扫 
支付宝扫一扫 
