CSS animation-duration 属性

CSS animation-duration 语法

在 CSS 中，animation-duration 属性用于定义动画的 “持续时间” 。

语法：

animation-duration: 时间值;

说明：

animation-duration 的取值是一个时间值，单位为 s（秒）或 ms（毫秒），也可以取小数。比如 animation-duration: 0.5s，表示持续时间为 0.5s。

对于 animation-duration 属性，小伙伴们还要清楚以下几点。

animation-duration 属性不能是负值。如果指定负值，则浏览器会将其视为 0s，此时动画会立即完成，没有可见的效果。
即使 animation-duration 被设置为 0s，动画仍然会执行，只是它的状态会立即从起始帧跳到结束帧，而不产生视觉上的过渡效果。

提示: 如果想让动画立刻完成，但依然触发动画事件，我们可以设置 animation-duration 为 0s。

CSS animation-duration 摘要

属于	CSS 动画
使用频率	高
是否继承	否
默认值	0s
兼容性	查看
官方文档	查看
MDN	查看

CSS animation-duration 示例

接下来，我们通过一个简单的例子来讲解一下 animation-duration 属性是如何使用的。

示例：animation-duration 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        @keyframes mytransform {
            0% { border-radius: 0; }
            50% { 
                border-radius: 50px; 
                transform: translateX(0); 
            }
            100% { 
                border-radius: 50px; 
                transform: translateX(50px); 
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div:hover {
            animation-name: mytransform;
            animation-duration: 2s;
            animation-timing-function: linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

animation-duration 示例

分析：

在这个例子中，我们使用 @keyframes 规则定义了一个名为 “mytransform” 的动画。其中，animation-duration: 2s; 表示动画持续时间为 2 秒。小伙伴们可以自行修改一下 animation-duration 的值，然后看看效果如何。

animation 是一个复合属性

在 CSS 中，animation 是一个复合属性，它包含以下子属性（如下表所示）。

animation 的子属性
子属性	说明
animation-name	定义要应用的动画名称
animation-duration	定义动画的持续时间
animation-timing-function	定义动画的速度曲线
animation-delay	定义动画的延迟时间
animation-iteration-count	定义动画的重复次数
animation-direction	定义动画的方向
animation-play-state	定义动画的播放状态（运行或暂停）
animation-fill-mode	定义动画在播放之前和之后如何应用样式到元素