CSSアニメーション効果アニメーションの一般的なスタイル

アニメーション

アニメーションを定義します。

/*アニメーションの各ステップで実行されるアクションを定義するキーフレームを設定します*/
@keyframes マイボックス{
            0%{変換: 翻訳(0,0);}
            25%{変換: translate(200px,0);}
            50%{変換: translate(200px,200px);}
            75%{変換: translate(0,200px);}
            100%{変換: 翻訳(0,0);}
        }

/*キーフレームを参照してアニメーションの実行スタイルを設定します*/
アニメーション: mybox 5s 1s 無限;

注記：

1. アニメーションが終了したら初期位置に戻ります。
2. 0% から 100% へ

animation-name: アニメーションの名前（存在する必要があります）

animation-duration: アニメーションの継続時間

animation-delay: アニメーション効果が表示されるまでの時間を指定します

animation-iteration-count: アニメーションが実行される回数を定義します

デフォルト値: 1; 無制限回数: 無限

animation-timing-function: アニメーション効果を定義します animation-fill-mode:

none: デフォルト値。スタイルは遅延後に有効になります。
backwards: スタイルは遅延の前に有効になります。
forwards: アニメーションが終了したら、終了位置で停止します。
両方: 後方と前方の特性を持ちます。

要約する

CSS アニメーション効果のよく使われるスタイルに関するこの記事はこれで終わりです。CSS アニメーションのよく使われるスタイルに関する詳細なコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。