試一試
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
<section class="flex-column" id="default-example">
<div id="example-element"></div>
<button id="play-pause">Play</button>
</section>
#example-element {
animation-duration: 3s;
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 #333333;
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%;
}
}
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 一次性設定所有動畫屬性。
語法
css
/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: revert;
animation-direction: revert-layer;
animation-direction: unset;
值
normal-
動畫在每個週期都
向前播放。換句話說，每次動畫迴圈時，動畫都會重置到起始狀態並重新開始。這是預設值。 反向-
動畫在每個週期都
向後播放。換句話說，每次動畫迴圈時，動畫都會重置到結束狀態並重新開始。動畫步驟反向執行，緩和函式也反轉。例如， ease-in緩和函式變為ease-out。 交替-
動畫在每個週期反轉方向，第一次迭代
向前播放。判斷週期是偶數還是奇數的計數從一開始。 alternate-reverse-
動畫在每個週期反轉方向，第一次迭代
向後播放。判斷週期是偶數還是奇數的計數從一開始。
備註： 當你在一個 animation-* 屬性上指定多個逗號分隔的值時，它們會按照 animation-name 出現的順序應用於動畫。對於動畫數量和 animation-* 屬性值不匹配的情況，請參見設定多個動畫屬性值。
注意：建立CSS 滾動驅動動畫時，指定 animation-direction 按預期工作，例如 reverse 會導致動畫在時間線推進過程中反向執行。alternate 值（結合 animation-iteration-count）會導致動畫在時間線推進過程中向前和向後執行。
正式定義
正式語法
animation-direction =
<single-animation-direction>#
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
示例
反轉動畫方向
HTML
html
<div class="box"></div>
CSS
css
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 0.7s;
animation-direction: reverse;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
結果
有關示例，請參閱 CSS 動畫。
規範
| 規範 |
|---|
| CSS 動畫級別 1 # animation-direction |
瀏覽器相容性
載入中…