CSS3を勉強したい

CSS3Cascading Style Sheets

CSS3でキーフレームアニメーションを作る

CSS3で作るキーフレームアニメーションの概要は、最初の状態と最後の状態に加え、必要であればその中間の動きも設定する、というものです。最初から中間、そして最後までを滑らかな動きで繋ぎます。

キーフレームアニメーションの設定には少なくとも、最初の状態(進捗率0%)と最後の状態(進捗率100%)の2箇所の設定が必要です。それに加えて中間での設定もできるというものです。

中間での進捗率も単位「%」で指定し、そこでのスタイルを適用することができます。そうして滑らかな動きを実現します。中間での指定は複数することができます。

キーフレームの記述方法

@keyframes {~}の、波括弧でくくった全てが1つのキーフレームアニメーションになります。

アニメーション名は、要素にアニメーションを適用する際に使います。

キーフレームアニメーションの中でのスタイルの指定は、上記のように@keyframes { }の中で指定します。ここからは、アニメーションを適用する要素に対して指定することができるプロパティを説明します。

animation-name プロパティ

設定した@keyframesは、アニメーションさせたい要素に適用する必要があります。その為に使用するのがanimation-nameプロパティです。
animation-name: アニメーション名;

animation-duration プロパティ

animation-durationプロパティを使って、アニメーションの長さを秒数で定義します。単位は「s」です。
animation-duration: 数値s;

animation-timing-function プロパティ

animation-timing-functionプロパティではアニメーションのイージングを設定します。
animation-timing-function: キーワード;

指定できるキーワードは次の通りです。

linear
一定の速度で変化する。
ease-in
最初はゆっくりした変化で、徐々に急激な変化となる。
ease-out
最初は急激な変化で、徐々にゆっくりした変化となる。
ease-in-out
最初と最後がゆっくりした変化で、途中が急激な変化となる。
step( )
段階的に変化する。
( )に段階数を、数値で指定する。
cubic-bezier( )
変化の度合いを任意で指定する。
(x軸, y軸, x軸, y軸)

animation-iteration-count プロパティ

animation-iteration-countプロパティではアニメーションの繰り返し回数を指定します。整数で指定します。

デフォルト値は「1」で、繰り返す場合は「2」以上の数値で指定します。
animation-iteration-count: 数値;

値を、数値ではなくinfiniteキーワードで指定することで繰り返し回数を無限に設定することができます。
animation-iteration-count: infinite;

animation-direction プロパティ

animation-directionプロパティではアニメーションの再生のされ方を制御します。逆に再生したり、繰り返しを設定している場合に、順再生と逆再生を交互に入れ替えることができます。
animation-direction: キーワード;

指定できるキーワードは次の通りです。

normal
デフォルト値。
順再生する。
reverse
逆再生する。
alternate
「順再生→逆再生」を繰り返す。
alternate-reverse
「逆再生→順再生」を繰り返す。

animation-delay プロパティ

animation-delayプロパティを使用することで、アニメーションの再生の開始を遅らせることができます。

遅らせる時間は秒数で、単位を「s」で指定します。
animation-delay: 秒数s;

animation-play-state プロパティ

animation-play-stateプロパティではアニメーションを再生するか一時停止するかを指定します。
animation-play-state: キーワード;

指定できるキーワードは次の通りです。

running
デフォルト値。
再生する。
paused
一時停止する。

JavaScriptと組み合わせて使用することが多いプロパティですが、:hover セレクタと組み合わせて使用することもあります。