animationプロパティを利用してCSSでアニメーション

アニメーションのプロパティ

animation-name

animation-name:[キーフレーム定義名];

キーフレーム名でアニメーションの内容を指定します。
キーフレームの記述例は以下のとおり。

@keyframes rotateFnc1 {
     0% {
         transform: rotateY(90deg);
         opacity:0;
     }
     50% {
         opacity:1;
     }
     100% {
         transform: rotateY(0deg);
         opacity:1;
     }
}

animation-duration

animation-duration:[再生時間];

アニメーションの再生時間を指定します。
時間は単位は「秒」なので、「0.5s」や「10.0s」の様に指定します。

animation-timing-function

animation-timing-function:[エフェクト方法];

アニメーション変化方法を指定します。
いわゆる「イージング」ですね。
指定できる値は下記のようなものがあります。
linear：直線的変化
ease：緩やかに始まり緩やかに終わる
など。他にもいろいろあります。
ちなみに「cubic-bezier」関数を利用した指定もできます。

animation-iteration-count

animation-iteration-count:[繰り返し数];

アニメーションを繰り返す回数を指定します。
infiniteを指定すると無限に繰り返します。

animation-direction

animation-direction:[ループ方法];

アニメーションの繰り返し時に、反転する動きなどを指定できます。
normal：順方向のアニメーションを繰り返す。
alternate：奇数回目の再生では順方向、偶数回目の再生では逆方向を繰り返す。

animation-delay

animation-delay:[開始までの待ち時間];

アニメーションの開始を遅延する時間を指定します。
時間は単位は「秒」なので、「0.5s」や「10.0s」の様に指定します。

animation-fill-mode

animation-fill-mode:[アニメーション前後の適用];

アニメーション開始前、もしくは終了後のプロパティの状態を指定します。
none：アニメーションで指定されたプロパティは開始前、終了後には適用されない。
forwards：アニメーション終了時(100%)のプロパティが維持される。
backwards：アニメーション開始時(0%)のプロパティが初期状態として適用される。
both：forwardsとbackwardsの両方の効果をもつ。

アニメーションを駆使してみよう

アニメーションに関するプロパティも様々ありますが、keyframesでの効果の組み合わせ方で様々なアニメーションをCSSで記述することができます。ぜひ一度試してみましょう！