📅 最后修改于: 2023-12-03 15:15:36.518000 🧑 作者: Mango
animationDuration 属性规定动画完成一个周期所花费的时间。
该属性适用于所有 CSS 动画，但仅适用于 CSS 过渡。
<style>
animation-duration: time;
</style>
或者
<style>
-webkit-animation-duration: time; /* Safari 和 Chrome */
-moz-animation-duration: time; /* Firefox */
-ms-animation-duration: time; /* Internet Explorer */
-o-animation-duration: time; /* Opera */
animation-duration: time;
</style>
属性值是一个时间值。默认值为 0。
下面是一些例子：
animation-duration: 2s; 表示动画将在 2 秒内完成一个周期。animation-duration: 0.5s; 表示动画将在 0.5 秒内完成一个周期。<!DOCTYPE html>
<html>
<head>
<title>animation-duration 属性</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
div 元素被创建出来并使用 animation-duration 属性。动画将在 3 秒内完成一个周期并无限次重复播放。@keyframes 规则用于创建动画。to 表示动画完成时应该应用的样式。from 表示动画起始时应该应用的样式。infinite 值在动画结束后将继续无限次播放动画。 如果您不想让动画反复地播放，只需在此处指定所需次数即可。 例如： animation-iteration-count: 5; 将动画播放 5 次。animationDuration 属性适用于所有浏览器，包括 Chrome、Firefox、Safari、Opera 和 Internet Explorer。
-webkit-animation-duration 属性。