トランジションアニメーションはプロパティの値を疑似クラスなどで変化させることがトリガーになって開始されます。ところが、ページが開いたら自動でアニメーションをさせたい場合などはトランジションアニメーションが使えません。このような場合、キーフレームアニメーションなら自動でアニメーションを実現することができます。
キーフレームの仕組み
簡単なアニメーションの動きにもアニメーションの開始と終了があります。この開始と終了のポイントがキーフレームになります。
また、少し複雑な動きをするアニメーションの場合には開始と終了だけのキーフレームだけではなく途中のポイントにもキーフレームが存在することになります。
まずこのキーフレームの作成方法を覚えましょう。
キーフレームの作成方法
キーフレームの作成方法は@keyframeという@ルールを使用します。
@keyframe キーフレームの名前 {
キーフレームの位置 {プロパティ:値}
}
@keyframeにはWebKitブラウザには接頭語が必要です。(safariで接頭語が必要2015/8/30現在）
@-webkit-keyframe
とする必要があります。
キーフレームの中に記述するセレクタはキーフレームの位置になります。通常ここのセレクタはパーセントで指定します。キーワードのtoとfromもセレクタとして使用できます。「from」が0パーセント、 「to」 が100パーセントです。
キーフレームの例
例えば次の例では、「rect」というキーフレームを定義しています。０パーセントの時に背景色は赤で50パーセントで青になり、100％の時に銀色になるキーフレームです。
@keyframes rect {
from { background-color:red; }
50% { background-color: blue;}
to {
background-color: silver;
height: 500px;
width: 500px;
}
}
animation-nameなどのプロパティ設定
キーフレームが定義できたらanimation-nameプロパティを記述します。
animation-nameプロパティの値は@keyframeで指定した名前になります。その他のプロパティはトランジションと同様に指定します。
キーフレームアニメーションの作成例
キーフレームアニメーションのサンプル
CSSのコード
@-webkit-keyframes rect {
from { background-color:red; }
50% { background-color: blue;}
to {
background-color: silver;
height: 500px;
width: 500px;
}
}
@keyframes rect {
from { background-color:red; }
50% { background-color: blue;}
to {
background-color: silver;
height: 500px;
width: 500px;
}
}
.container {
background-color:red;
border: 8px solid black;
height: 100px;
width: 100px;
-webkit-animation: rect 6s ease 1s infinite alternate;
animation: rect 6s ease 1s infinite alternate;
}
HTMLコード
<div class="container"> </div>
- animation-name
- animation-nameは@keyframesで定義した名前を使います。noneを指定するとアニメーションしません。
- animation-duration
- 変化する時間を指定します。秒単位(s)で指定します。（小数可） 初期値は０s
- animation-timing-function
- イージングの設定です。 ease、linear、ease-in、ease-out、ease-in-outのいずれかのキーワードで指定するか、cubic-bezier(数値, 数値, 数値, 数値)で指定します。
- animation-delay
- スタイルの変化を開始するまでの時間を指定します。初期値は０s
- animation-iteration-count
- アニメーションの繰り返し回数はanimation-iteration-countで指定します。初期値は１です。
値をinfiniteとすると繰り返しアニメーションを行います。 - animation-direction
- アニメーションの再生を逆にすることができます。また順方向と逆方向を交互に繰り返すこともできます。順方向はnormalでデフォルト値です。alternateはアニメーションが終了すると逆方向にアニメーションを行います。
- animation-fill-mode
- infinite以外で繰り返しを行う場合、つまり必ずアニメーションが終了する条件の場合の、最初の表示と最後の表示の設定ができます。値は「backwards」と「forwards」、そして「both」があります。「backwards」は「0%」 または 「from」 キーフレームで定義された値をアニメーション開始前に適用します。「forwards」は最後のキーフレームで指定値された値を維持し、「both」は「forwards」 と 「backwards」 の両方に従います。
animation: rect 6s ease 1s both;
- animation-play-state
- runningかpausedのキーワードを使用して疑似クラスを使用するなどしてアニメーションを止めたりスタートしたりすることができます。
.container:hover{ animation-play-state:paused; background-color:green; }
