CSSアニメーションを区切りよく停止する方法

CSSアニメーションをIteration-Eventのタイミングで停止する方法の説明

結論

Iterationイベントのタイミングでアニメーションを止めれば、良きタイミングでアニメーションを停止させることができます。

適当なタイミングで停止するサンプル

---

---

toggle sw 任意のタイミングで、CSSの削除や追加をする。

timing pause 1サイクルの終了タイミングで、一時停止する。 再度押すと継続する。

timing delete 1サイクルの終了タイミングで、CSSを削除する。

code

任意のタイミングで削除

element.classList.toggle(“animation-css”); を、手動で呼ぶのみ

アニメーション用のCSSが取り除かれ、初期のスタイルで表示される。

let toggle_sw_f = () => {
    const animation_item = document.getElementById("animation-item");
    animation_item.classList.toggle("animation");
};

1サイクルの終了タイミングで一時停止する

1サイクルの終了タイミングでアニメーションを一時停止する。

animationiterationイベントを拾います。

animation-play-state: paused; を設定する。

.paused {
    animation-play-state: paused;
}

const listenerP = () => {
    const animation_item = document.getElementById("animation-item");
    animation_item.classList.add("paused");
    animation_item.removeEventListener("animationiteration", listenerP);
};
let pause_f = () => {
    const animation_item = document.getElementById("animation-item");
    // 停止中なら解除
    if (animation_item.classList.contains("paused")) {
        animation_item.classList.remove("paused");
    } else {
        animation_item.addEventListener("animationiteration", listenerP);
    }
};

1サイクルの終了タイミングでCSSを削除する

1サイクルの終了タイミングでアニメーション用のCSSを削除する。

animationiterationイベントを拾います。

const listenerA = () => {
    const animation_item = document.getElementById("animation-item");
    animation_item.classList.remove("animation");
    animation_item.removeEventListener("animationiteration", listenerA);
};
let stop_f = () => {
    const animation_item = document.getElementById("animation-item");
    animation_item.addEventListener("animationiteration", listenerA);
};

リスナー登録とHTMLとCSS

listenerは適当に登録

window.addEventListener("load", () => {
    document.getElementById("toggle").addEventListener("click", toggle_sw_f);
    document.getElementById("pause").addEventListener("click", pause_f);
    document.getElementById("stop").addEventListener("click", stop_f);
});

<div id="animation-item" class="animation default-design"></div>
<button id="toggle">toggle sw</button>
<button id="pause">timing pause</button>
<button id="stop">timing delete</button>

.animation {
    animation-name: animation;
    animation-duration: 2s;
    animation-iteration-count: 5;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
@keyframes animation {
    0% {
        background-color: blueviolet;
        transform: translateX(0);
    }
    100% {
        background-color: blue;

        transform: translateX(280px);
    }
}
.default-design {
    background-color: gray;
    width: 2rem;
    height: 2rem;
}

参考資料

CSS アニメーションのヒントとコツ

CSS アニメーションの使用

CSS アニメーション

参考記事

CSSアニメーションの説明

transitionの説明

以上。