首页 > 文章 > 前端

CSSanimation-duration控制动画时长，单位为s或ms

时间：2025-10-09 18:18:46 253浏览收藏

想要精通CSS动画？`animation-duration`属性是关键！本文深入解析`animation-duration`，教你如何使用秒（s）或毫秒（ms）为单位，精确控制动画的播放速度。从基本语法`animation-duration: 时间值;`到配合`@keyframes`和`animation-name`的实战应用，例如让元素在2秒内滑动200像素。通过调整`animation-duration`的数值，你可以轻松实现快速的微交互（0.3s）或缓慢的背景过渡（5s）。掌握`animation-duration`，让你的网页动画更具吸引力，提升用户体验！记得，默认值是0s，动画不会播放哦！

animation-duration用于设置动画周期时长，语法为animation-duration:时间值；需配合@keyframes和animation-name使用，如animation-duration:2s表示动画持续2秒，常见取值有1s、0.3s、5s等，默认值为0s动画不播放。

css animation-duration如何控制动画时长

在CSS中，animation-duration 属性用于设置动画完成一个周期所需要的时间。你可以通过它精确控制动画播放的快慢。

基本语法

animation-duration: 时间值;

时间值可以使用秒（s）或毫秒（ms）单位。常用的是秒，比如 1s 表示1秒，0.5s 表示半秒。

如何设置动画时长

将 animation-duration 与 @keyframes 和 animation-name 配合使用：

先定义关键帧动画（@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 能让动画更符合用户体验节奏。

今天关于《CSSanimation-duration控制动画时长，单位为s或ms》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！