
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の両方の効果をもつ。