animation-duration属性定义动画完成一次所需时间，单位为秒（s）或毫秒（ms），默认值0s；可配合@keyframes设置动画时长，支持多动画独立配置持续时间，建议值在0.3s~1s之间以保证流畅体验。
CSS中的animation-duration属性用于定义一个动画完成一次所需的时间。这个时间可以控制动画是快速闪现还是缓慢过渡，是实现流畅视觉效果的关键之一。
animation-duration 基本语法
该属性的语法非常简单：
animation-duration: ;
其中 可以是秒（s）或毫秒（ms）。默认值为 0s，表示动画不会播放。
例如：
立即学习“前端免费学习笔记（深入）”；
.box {
animation-name: slide;
animation-duration: 2s;
}
上面代码表示名为 slide 的动画将在2秒内完成一次循环。
支持的时间单位
该属性只接受时间单位，主要有两种：
s：秒，如 0.5s、3s ms：毫秒，如 500ms（等于 0.5s）
注意：不能使用其他单位（如 px、% 或 em），否则会导致样式无效。
Fireflies.ai
自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。
145 查看详情
与多个关键帧配合使用
当使用 @keyframes 定义动画时，animation-duration 决定了从起始帧到结束帧的整体耗时。
示例：
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in {
animation-name: fade;
animation-duration: 1.5s;
}
这个元素会在1.5秒内从完全透明变为不透明。
多动画场景下的设置
如果一个元素应用了多个动画，可以用逗号分隔的方式为每个动画分别设置持续时间：
.element {
animation-name: slide, grow;
animation-duration: 2s, 1s;
}
这里，slide 动画持续2秒，grow 持续1秒，各自独立运行。
基本上就这些。合理设置 animation-duration 能让界面动效更自然，太短会显得突兀，太长则可能让用户感到延迟。一般推荐在 0.3s ~ 1s 之间调整，具体根据交互场景决定。
以上就是CSS动画持续时间如何设置_animation-duration属性详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/992734.html
微信扫一扫 
支付宝扫一扫 
