ウェブのあれこれ
ウェブを活用したいひとのためのブログ
animationプロパティを利用してCSSでアニメーション
2016/01/17 HTML/CSS

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

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で記述することができます。ぜひ一度試してみましょう!
Provided by Revolme inc.
revolme.co.jp