CSSアニメーションで遊ぶにはどうすればいいですか？ （整理して共有）

この記事では、アニメーションとは何か、アニメーションの呼び出し方法、マルチキーフレーム アニメーションの実装方法など、CSS でのアニメーションに関する関連知識を提供します。

1. アニメーションとは

CSS では、@keyframes を使用してアニメーションを定義できます
(キーフレームは「」を意味します)キーフレーム")

一般構造:

@keyframes rotation { /* rotation 动画名 */
    from {   /* 起始状态 */ 
        transform: rotate(0);
    }
    to {    /* 结束状态 */ 
        transform: rotate(360deg);
    }}

---

2. アニメーションの呼び出し

アニメーションを定義した後、アニメーション属性を使用してアニメーションを呼び出すことができます。

アニメーションの基本属性:

• name: アニメーションの名前
  (初期デフォルト値なし)
• duration: アニメーションの継続時間
  (初期デフォルト値 0s)
• timing 関数: 変更速度カーブ
  (初期デフォルト値イーズ)
• Delay: 遅延時間 (アニメーションが開始するまでの経過時間)
  (初期デフォルト値 0s)
• iteration-count: アニメーションの実行数
  (初期デフォルト値 1、アニメーションを永久に実行したい場合は、infinite と記述します)

animation:  name | duration | timing function | delay | iteration-count;

また、次のような属性があります。 ：

animation-direction (アニメーションを順番に逆再生するかどうかを設定します)

• normal: アニメーションを再生します。通常の方法 (初期デフォルト値)
• reverse: アニメーションを逆方向に再生します
• alternate: アニメーションの 2 回目、4 回目、6 回目... (偶数回) を再生させます自動的に反転します
• alternate-reverse: 奇数番目のアニメーションを実行させます 自動反転実行
  

animation-fill-mode (状態を設定します)アニメーションが再生されていないときのアニメーション)

#none: いいえアニメーションのデフォルトの動作を変更します
• #forwards: 最終終了状態でアニメーションを停止します
• backwards: アニメーション遅延で指定された期間中にアニメーションの最初のキーフレームにスタイルを適用します
• both: 同時に前方と後方のルールに従います
• 
  
#animation-play-state (アニメーションを再生するか一時停止するかを設定します)

paused: アニメーションの再生を一時停止します

running: アニメーションを通常に再生します
• 3. マルチキーフレーム アニメーション

---

このエフェクトで複数の For アニメーションを実現したい場合は、現時点で複数のキーフレームを使用できます。

一般的な構造:

@keyframes changeColor {
	0% {
		background-color: red;
	}
	20% {
		background-color: orange;
	}
	40% {
		background-color: blue;
	}
	100% {
		background-color: green;
	}}

(学習ビデオの共有:

css ビデオ チュートリアル

)

以上がCSSアニメーションで遊ぶにはどうすればいいですか？ （整理して共有）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。