CSSアニメーションを途中で止めて姿勢を維持する方法

序文

かつて、難しい問題に遭遇しました。タワークレーンからスイングハウスを落下させる必要がありましたが、落下の過程で、家は落下の瞬間のスイング角度を維持する必要がありました。当時、私にとっては非常に困難でした。最初は、落下の瞬間に家の現在のスイング角度を取得し、それを家の transform:rotate() に割り当てたいと考えましたが、これは面倒すぎて最適な解決策ではありませんでした。

しかし実際には、この問題を解決できるのは 1 つの属性だけです。

アニメーション再生状態

1. CSSのみ

このプロパティを使用して、アニメーションをそのモーション サイクルで一時停止し、次回開始するときに現在のフレームから直接開始します。これは、アニメーション プロパティで機能するアニメーション プロパティです。CSS でも JS でも使用でき、同様に便利です。少なくとも、角度を取得して割り当てるよりも便利です。

.xxx {
  アニメーション再生状態: 一時停止;  
  //このプロパティが追加されると、CSS アニメーションはすぐに一時停止され、現在のフレームに留まります}

.xxx {
  アニメーション再生状態: 実行中; 
  //このプロパティが追加されると、CSS アニメーションは現在のフレームからすぐに動作を開始します。
}

ページ要素にアニメーションを追加し、ホバー状態のときに表示されるように設定できます。

 アニメーション再生状態:一時停止

マウスを要素の上に移動するとアニメーションは停止します。

2. JSのみを使用する

//i が 1 の場合、メディアが再生され、音符が浮かびます。i が 0 の場合、メディアが一時停止し、音符が一時停止します。
            (i == 1) の場合 {
                right.style.animationPlayState = "一時停止"
                オーディオを一時停止します。
                私 = 0;
            } それ以外 {
                right.style.animationPlayState = "実行中";
                オーディオを再生します。
                私 = 1;
            } 

CSSアニメーションを停止して維持する方法についての記事はこれで終わりです。CSSアニメーションの停止の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。