首页 > 文章 > 前端

CSS动画持续时间设置详解

时间：2025-11-02 23:27:35 186浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《CSS动画持续时间设置方法_ animation-duration详解》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

animation-duration属性定义动画完成一次所需时间，单位为秒（s）或毫秒（ms），默认值0s；可配合@keyframes设置动画时长，支持多动画独立配置持续时间，建议值在0.3s~1s之间以保证流畅体验。

CSS动画持续时间如何设置_animation-duration属性详解

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

该属性的语法非常简单：

animation-duration: ;

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

例如：

.box {
animation-name: slide;
animation-duration: 2s;
}

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

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

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

当使用 @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动画持续时间设置详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！