純粋な CSS を使用して CSS アニメーションの一時停止および再生効果を実現するにはどうすればよいですか? anime-play-stateプロパティの紹介（詳しい説明）

CSS アニメーションを一時停止または再生するには、純粋な CSS メソッドを使用します。実現不可能と思われますか? それとも実現できたとしても、多くの CSS スタイルを必要とする非常に面倒な実装方法です。実際には、これは当てはまりません。CSS3 アニメーションには、アニメーションを一時停止したり再生したりできるプロパティがあります。この章では、純粋な CSS を使用して CSS アニメーションの一時停止および再生効果を実現する方法を紹介します。 anime-play-state プロパティの概要 (詳細説明)。困っている友人は参考にしていただければ幸いです。

#animation-play-state プロパティ##

 animation-play-state: paused | running;

animation-play-state: プロパティは、アニメーションが実行中か一時停止かを定義します。これをクエリして、アニメーションが実行中かどうかを確認できます。さらに、その値を設定してアニメーションの再生を一時停止および再開することができます。

JavaScript を使用すると、CSS アニメーションの実行と再生を制御できます。いくつかの主要なコードを以下に示します。

html コード:

<div class="btn">stop</div> 
<div class="animation"></div>

css コード:

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

js コード:

document.querySelector('.btn').addEventListener('click', function() {
    let btn = document.querySelector('.btn');
    let elem = document.querySelector('.animation');
    let state = elem.style['animationPlayState'];
    
    if(state === 'paused') {
        elem.style['animationPlayState'] = 'running';
        btn.innerText = 'stop';
    } else {
        elem.style['animationPlayState'] = 'paused';
        btn.innerText = 'play';
    }
    
});

レンダリング (再生中および再生停止後):

純粋な CSS 実装

純粋な CSS を使用して実現できるかどうかを調べてみましょう。

hover 擬似クラスの実装

hover 擬似クラスを使用して、マウスがボタン上に置かれたときのアニメーション スタイルの一時停止を制御します。

キーコードは次のとおりです:

html コード:

<div class="btn stop">stop</div> 
<div class="animation"></div>

css コード:

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

.stop:hover ~ .animation {
    animation-play-state: paused;
}

レンダリング:

もちろん、この方法は十分に賢明ではありません。マウスの自由を放すと、一度クリックして一時停止し、もう一度クリックして再生します。他の方法はありますか？

疑似クラスの実装を確認しました

前回の記事「CSSの面白い話題(8): Pure CSS Navigation Bar Tab Switching Solution」も同様です前述のように、ラジオ タグのチェックされた疑似クラスを使用し、さらに純粋な CSS を実装してクリック イベントをキャプチャします。

クリックされた要素を使用して、一部の CSS スタイルを制御できます。実装は次のとおりです。

html コード:

<input id="stop" type="radio" name="playAnimation"/>
<input id="play" type="radio" name="playAnimation"/>

<div class="box">
    <label for="stop">
        <div class="btn">stop</div>
    </label>
    <label for="play">
        <div class="btn">play</div>
    </label>
</div>

<div class="animation"></div>

css コード:

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

#stop:checked ~ .animation {
    animation-play-state: paused;
}

#play:checked ~ .animation {
    animation-play-state: running;
}

2 つの無線が #stop と #play になることを願っています。をクリックして、animation-play-state:pausedまたはanimation-play-state:runningをそれぞれ.animation要素に割り当てます。また、2 つのうち 1 つだけが有効になるため、2 つの無線タグには同じ name 属性を与える必要があります。

レンダリング:

上記の例では、CSS アニメーションを一時停止して再生するために純粋な CSS メソッドが実装されています。

もちろん、ラジオをチェックボックスに置き換えたり、:target 疑似クラスセレクターを使用して上記と同じ効果を実現するなど、他の方法もあります。興味がある場合は、試してみてください。

以上が純粋な CSS を使用して CSS アニメーションの一時停止および再生効果を実現するにはどうすればよいですか? anime-play-stateプロパティの紹介（詳しい説明）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。