CSS动画持续时间怎么调animation-duration教程

CSS中的`animation-duration`属性是控制动画流畅度的核心参数，它精准定义动画完成一次循环所需的时间（单位为秒或毫秒），默认值0s意味着动画不执行；通过配合`@keyframes`可实现从淡入、滑动到缩放等各类过渡效果，支持多动画独立设时长，并强调0.3s~1s为兼顾响应性与自然感的最佳实践区间——掌握它，就能让网页动效告别生硬卡顿，真正提升用户体验。

CSS中的animation-duration属性用于定义一个动画完成一次所需的时间。这个时间可以控制动画是快速闪现还是缓慢过渡，是实现流畅视觉效果的关键之一。

animation-duration 基本语法

该属性的语法非常简单：

其中 可以是秒（s）或毫秒（ms）。默认值为 0s，表示动画不会播放。

例如：

上面代码表示名为 slide 的动画将在2秒内完成一次循环。

支持的时间单位

该属性只接受时间单位，主要有两种：

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

注意：不能使用其他单位（如 px、% 或 em），否则会导致样式无效。

与多个关键帧配合使用

当使用 @keyframes 定义动画时，animation-duration 决定了从起始帧到结束帧的整体耗时。

示例：

这个元素会在1.5秒内从完全透明变为不透明。

多动画场景下的设置

如果一个元素应用了多个动画，可以用逗号分隔的方式为每个动画分别设置持续时间：

这里，slide 动画持续2秒，grow 持续1秒，各自独立运行。

基本上就这些。合理设置 animation-duration 能让界面动效更自然，太短会显得突兀，太长则可能让用户感到延迟。一般推荐在 0.3s ~ 1s 之间调整，具体根据交互场景决定。

好了，本文到此结束，带大家了解了《CSS动画持续时间怎么调animation-duration教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！