試一試
animation-play-state: paused;
animation-play-state: running;
<section class="flex-column" id="default-example">
<div class="animating" id="example-element"></div>
</section>
#example-element {
background-color: #1766aa;
color: white;
margin: auto;
margin-left: 0;
border: 5px solid #333333;
width: 150px;
height: 150px;
border-radius: 50%;
}
.animating {
animation-name: slide;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slide {
from {
background-color: orange;
color: black;
margin-left: 0;
}
to {
background-color: orange;
color: black;
margin-left: 80%;
}
}
恢復一個已暫停的動畫會使其從暫停時停止的位置繼續播放，而不是從動畫序列的開頭重新開始。
語法
css
/* Single animation */
animation-play-state: running;
animation-play-state: paused;
/* Multiple animations */
animation-play-state: paused, running, running;
/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;
值
備註： 當你在一個 animation-* 屬性上指定多個逗號分隔的值時，它們會按照 animation-name 出現的順序應用於動畫。對於動畫數量和 animation-* 屬性值不匹配的情況，請參見設定多個動畫屬性值。
正式定義
正式語法
animation-play-state =
<single-animation-play-state>#
<single-animation-play-state> =
running |
paused
示例
暫停動畫
此動畫已暫停，但當你懸停在其上方時會執行。
HTML
html
<div class="box"></div>
CSS
css
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 0.7s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
.box:hover {
animation-play-state: running;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
結果
將滑鼠懸停在矩形上以播放動畫。
有關示例，請參閱 CSS 動畫。
規範
| 規範 |
|---|
| CSS 動畫級別 1 # animation-play-state |
瀏覽器相容性
載入中…