animation-duration
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
* Some parts of this feature may have varying levels of support.
animation-duration
CSS 属性设置动画完成一个动画周期所需的时间。
尝试一下
animation-duration: 750ms;
animation-duration: 3s;
animation-duration: 0s;
<section class="flex-column" id="default-example">
<div class="animating" id="example-element"></div>
<button id="play-pause">Play</button>
</section>
#example-element {
animation-direction: alternate;
animation-iteration-count: infinite;
animation-name: slide;
animation-play-state: paused;
animation-timing-function: ease-in;
background-color: #1766aa;
border-radius: 50%;
border: 5px solid #333;
color: white;
height: 150px;
margin: auto;
margin-left: 0;
width: 150px;
}
#example-element.running {
animation-play-state: running;
}
#play-pause {
font-size: 2rem;
}
@keyframes slide {
from {
background-color: orange;
color: black;
margin-left: 0;
}
to {
background-color: orange;
color: black;
margin-left: 80%;
}
}
"use strict";
window.addEventListener("load", () => {
const el = document.getElementById("example-element");
const button = document.getElementById("play-pause");
button.addEventListener("click", () => {
if (el.classList.contains("running")) {
el.classList.remove("running");
button.textContent = "Play";
} else {
el.classList.add("running");
button.textContent = "Pause";
}
});
});
使用动画的简写属性 animation
可以一次性设置所有动画属性,这通常非常方便。
语法
/* 单个动画 */
animation-duration: 6s;
animation-duration: 120ms;
/* 多个动画 */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;
/* 全局值 */
animation-duration: inherit;
animation-duration: initial;
animation-duration: revert;
animation-duration: revert-layer;
animation-duration: unset;
值
<time>
-
动画完成一个周期所需的时间。可以用秒(
s
)或毫秒(ms
)指定。值必须是正数或零,单位是必需的。如果未提供值,则使用默认值
0s
,此时动画仍会执行(会触发animationStart
和animationEnd
事件)。如果animation-duration
为0s
时,动画是否可见取决于animation-fill-mode
的值,如下所述:- 如果
animation-fill-mode
设置为backwards
或者both
,则在animation-delay
倒计时期间将显示由animation-direction
定义的动画的第一帧。 - 如果
animation-fill-mode
设置为forwards
或者both
,在animation-delay
结束后,将显示由animation-direction
定义的动画的最后一帧。 - 如果
animation-fill-mode
设置为none
,动画将不会有任何的视觉效果。
- 如果
备注:
负值是无效的,会导致声明被忽略。一些早期的、有前缀的实现可能将其视为与 0s
相同。
备注:
当你在 animation-*
属性上指定多个逗号分隔的值时,它们将按照 animation-name
出现的顺序应用于动画。对于动画数量和 animation-*
属性值不匹配的情况,请参见设置多个动画属性值。
形式定义
形式语法
animation-duration =
<time [0s,∞]>#
示例
设置动画持续时间
此动画有 0.7 秒的动画持续时间。
HTML
<div class="box"></div>
CSS
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 0.7s;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
将鼠标悬停在矩形上来播放动画。
参见 CSS 动画以获取示例。
规范
Specification |
---|
CSS Animations Level 1 # animation-duration |