例でCSSアニメーションでヘッドスタート

私はCSSの弱点を修正し続け、今日はCSSアニメーションのための時間です.
CSSは、キーワード@キーフレームを使用してアニメーションを作成するヘルプ、それはアニメーションの中で取得するプロパティと時間の量の初期状態を設定するのに役立ちます.
我々は、サイズ、色、サイズ、可視性とより多くのプロパティを変更します.

1 -私のキーフレームアニメーションを作成する
KeyFrameには、名前と使用する必要があります.これにより、プロパティから変更されたスコープから終了までのスコープに役立ちます.
たとえば、アニメーションのMyアニメーションは、0から50 %の境界線半径を変更します.

@keyframes myanimation {
    from {
        border-radius:0px
    }
    to {
        border-radius: 50%;
    }
}

2 -要素と私のキーフレームを接続する
私の要素は、アニメーション名とアニメーション期間を知る必要があります.

animation-name: myanimation;
animation-duration: 3s;

あなたのアニメーションを書くもう一つの方法は、将来の変更に柔軟であるため、代わりに%である.
他のプロパティはアニメーション遅延とアニメーション反復カウントです.

アニメーション遅延:遅延後にアニメーションを開始;

アニメーション反復数:設定は、アニメーションを実行しているが、デフォルトの1で、それは他の数字の値または無限に停止しないように変更することができます設定します.

何度か、これらのケースのためにkeyframe状態で要素を始めたいです.

animation-fill-mode: backwards;

最後の要素の状態を維持する場合は、オプションのfowardsを使用します.

animation-fill-mode: fowards;

両方の状況については、両方のキーワードを使用します.

animation-fill-mode: both;

それだ!
これはCSSでのアニメーションでの簡単な概要です、あなたはそれで遊ぶことができて、そのようにCSSですばらしいアニメーションを構築することができます:
あなたがこのポストを楽しむならば、それを共有してください!
イメージありがとう