CSSでアニメーションを要素に適用したいときには、Keyframesとanimationを利用することで、細かい設定が可能なアニメーションの動作を要素に適用することができます。
Keyframesとanimationの使い方はセットで覚える必要があります。
KeyframesがCSSのアニメーションで設定の役割になり、設定したKeyframesを元にanimationで動きを要素に適用する使い方をするため、keyframesとanimationの使い方は一緒に覚える必要があるのです。
CSSのkeyframesとanimationでアニメーション
はじめにKeyframesとanimationのCSSを、見出しのh1要素に適用させてアニメーションする場合をサンプルにしました。「keyframesとanimationのセットはこんな感じの使い方になるんだな。」という全体像を把握するキッカケにしてみてください。
<header>
<h1>Animation</h1>
</header>
HTMLはhtmlファイルのheaderにh1で見出しの要素をマークアップしておきます。
次に、マークアップしたヘッダーのh1要素にアニメーションの動作を適用するためのKeyframesをCSSファイルに記述します。
@keyframes right-to-left {
0% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
Keyframesの使い方は「@Keyframes」とその右横のright-to-leftのような「キーフレーム名」、そしてアニメーションを再生する始点になる0%と、アニメーションの終点になる100%に、それぞれCSSのプロパティと値を記述した使い方をしているのを覚えておきます。
Keyframesを使用してアニメーションの動作を適用するための使い方は、以下のCSSのようにanimationプロパティを利用して要素に適用します。
header h1{
animation:right-to-left 1s;
color: #333;
text-align: center;
}
ヘッダーのh1要素をアニメーションで動作させたいので、header h1セレクタをCSSファイルに作成してanimationプロパティを記述します。
animationプロパティの値には「right-to-left」の記述がありますが、これは、Keyframesを作成したときに設定したキーフレーム名です。
キーフレーム名の右横には1sの記述もあります。
1sは1秒。つまりKeyframesで設定したアニメーションの動作を1秒かけて再生することができるように指定した使い方です。
これによりCSSのanimationプロパティで適用したKeyframesの設定はアニメーションの動作として、ヘッダーのh1要素が通常の位置から200pxずれた場所を始点とし、元の位置を終点とした間でアニメーションの再生が行われます。
See the Pen
アニメーション by @shu (@shua01cdfbae5)
on CodePen.
上のCodePenでRerunをクリックするとアニメーションの動きが確認できます。
keyframesとanimationの使い方を覚えることで「CSSのアニメーションは実装できるんだな。」というのが把握できたかもしれません。なんとなくでもかまいません。
次はkeyframesとanimationの使い方を一つずつ覚えていきます。
CSSの@keyframesの使い方
CSSのKeyframesの使い方は@をKeyframesの先頭に付けて@Keyframesと記述して使用します。
@KeyframesはCSSのアットルールというCSSの動作を設定するためのもので、アニメーションの流れに沿ったスタイルを定義する使い方をします。
スタイルの定義は@Keyframesの中に始点と終点、必要ならば中間点も記述し、キーフレームを設定して行く使い方をします。
以下の書式をサンプルにしてCSSの@keyframesの基本的な使い方を覚えて行きます。
@keyframes キーフレーム名 {
0% {
プロパティ: 値;
}
100% {
プロパティ: 値;
}
}
まず@Keyframesを記述してから、半角スペースを空けて、キーフレーム名を記述します。
キーフレーム名は任意名で良いのですが、後で見たときに分かりやすいようなキーフレーム名にします。例えばフェードインするアニメーションの場合は「fadein」のようにです。
@Keyframesの中には、始点と終点を含むキーフレームの設定を記述します。
始点は0%{}に、終点は100%{}に記述します。
上記の@Keyframesの書式の使い方を参考に、headerのh1要素に適用したKeyframesと照らし合わせて覚えてみます。
@keyframes right-to-left {
0% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
Keyframes名は「right-to-left」にしているので、この@Keyframesは右から左に動くアニメーションを再生するKeyframesなことが分かります。
0%は@Keyframesでアニメーションを動かすときの始点です。
CSSのtransformでtranslateXを記述し、括弧の中に200pxを指定することで、header要素のセンター配置から右に200pxずらした位置をアニメーションを動かす始点にしています。
以下の黄色背景の画像はtranslateX(200px)のズレ具合をアニメーションさせずに適用したので、始点の位置が見て覚えやすいかと思います。
そして100%は@Keyframesでアニメーションを動かすときの終点です。
100%にはtransform: translateX(0)を指定することで、始点0%のとき200px右にずれていたh1要素は、アニメーションの再生が始まると終点を目指して元の位置(ヘッダーの中央)に移動します。
@Keyframesの始点と終点の間には必要に応じて1%〜99%の中間点を追加する使い方もできます。
例えば始点と終点しか設定していない@Keyframesに50%の中間点を追加してから、スタイルはCSSのcolor:hotpinkで記述します。
@keyframes right-to-left {
0% {
transform: translateX(200px);
}
50%{
color: hotpink;
}
100% {
transform: translateX(0);
}
}
すると、設定した@Keyframesでのアニメーションの動作は、0%のtranslateXで指定した始点の位置から、100%で指定した終点を目指して横スライドの移動をする中で、中間点の50%のときに適用したピンク色に一度点滅するという@Keyframesを設定することができます。
See the Pen
Untitled by @shu (@shua01cdfbae5)
on CodePen.
あとはCSSでanimationプロパティの使い方を覚えるだけなのです。
animationプロパティの使い方も覚える
animationプロパティの使い方も覚えておく必要ありです。CSSでKeyframesを設定しただけではアニメーションを要素に適用できないからです。
CSSのanimationプロパティの使い方は値を一括で指定する以下の書式を参考にした書き方で覚えると分かりやすいです。
animation:キーフレーム名 再生時間 補間方法 ディレイ 繰り返し 方向 fill-mode;
animationプロパティの値で必須なのは「キーフレーム名」と「再生時間」です。
以下のanimationプロパティにはキーフレーム名と再生時間だけを指定済みです。
header h1{
animation:right-to-left 1s;
}
キーフレーム名は@Keyframesで設定したキーフレーム名
再生時間は@Keyframesで設定した始点0%から終点100%までの間のアニメーション再生時間
例えば上のCSSでanimationプロパティの値からright-to-leftを削除してしまうとanimation-name: noneが適用されます。
さらに再生時間の1sを削除するとanimation-duration: 0sが適用されます。
animation-nameとanimation-durationはそれぞれのanimationの値を個別で指定するときに使用するCSSプロパティです。
一括指定のanimationプロパティで書いた場合は以下
animation: none 0s
つまり「アニメーション名なし」の「再生時間0秒」でアニメーションをしていることになるのでanimationは効きません。
アニメーション名の初期値はnone、再生時間の初期値は0sです。
それなりに動作してくれる初期値ではないのでCSSのanimationプロパティの使い方においてアニメーション名と再生時間は必須なのです。
アニメーション名と再生時間を個別指定する場合は、animation-nameでアニメーション名を、animation-durationで再生時間を記述する使い方をします。
header h1{
animation-name: fadein-right;
animation-duration: 1s;
}
補間方法：animation-timing-function
animationの補間方法は始点と終点の間の再生速度を調節することができます。この調節を「補完」や「イージング」と呼びます。
補間方法の記述方法は一括指定の場合は、ease、liner、ease-in、ease-in-outなどのベジエ曲線を記述します。
補完方法の初期値はeaseです。
- easeは最初と最後を滑らかに再生
- linerは一定の速度で再生
など、種類が多いことに加えて、アニメーションを再生しても違いが分かりづらいこともあるため、Chromeの検証ツールを活用して使い方を覚えると分かりやいかもしれません。
animationの補完方法を個別に指定する場合はCSSのanimation-timing-functionを使用します。
ディレイ：animation-delay
animationのディレイは、指定した時間だけ再生速度を遅らせることができます。
header h1{
animation:right-to-left 1s ease 3s;
}
例えばanimation:right-to-left 1s ease 3s;と指定した場合、right-to-leftというキーフレーム名のアニメーションを1秒かけて、最初と最後を滑らかに再生しますが、再生開始は3秒後にスタートします。
ディレイを個別指定する場合は、animation-delayを使用します。
繰り返し：animation-iteration-count
iteration-countは、アニメーションを何回繰り返し行うか指定します。5回繰り返すなら5を指定するという使い方をします。
初期値はanimation-iteration-count: 1で、1回の再生です。
繰り返しを指定した場合には、終点までのアニメーションが終わると、再び始点から再生が始まります。
また、CSSのアニメーションを無限ループする場合はinfiniteを指定します。
繰り返しの個別指定を利用するときはanimation-iteration-countを使用します。
方向：animation-direction
アニメーションを再生する方向を指定します。標準では始点から終点にアニメーションが再生しますが「altemate」を指定すると再生と逆再生を交互に繰り返す使い方ができます。
header h1{
animation: fadein-right 1s ease 2s 5 alternate;
}
以下のCodePenでRerunをクリックすると2秒後にアニメーションの動きが確認できます。
See the Pen
繰り返しアニメーション by @shu (@shua01cdfbae5)
on CodePen.
方向を逆再生から再生の順番でアニメーションを繰り返したい場合もあるかもしれません、その場合はalternate-reverseを指定します。
方向の初期値はanimation-direction: normalです。
個別指定するときにはCSSのanimation-directionプロパティを使用します。
表示：animation-fill-mode
CSSのアニメーションは標準では、再生後とディレイ中(再生の遅らせ中)は要素に適用しているスタイルで表示されます。
例えばヘッダーにサブタイトルがあり文字色を白にしていて、始点を紫に、終点を水色にしていたとすると、アニメーション終了後は白文字になります。
@keyframes animation {
0% {
color:#a287eb;
opacity:0;
}
100% {
color:rgb(90, 205, 203);
opacity;1;
}
}
header span{
color: #fff;
animation: animation 3s ease 3 forwards;
}
このときanimation-fill-modeの使い方で値をforwardsに指定すると、アニメーション終了後は水色を維持します。
See the Pen
Untitled by @shu (@shua01cdfbae5)
on CodePen.
上のCodepenでは紫色から水色に変化するアニメーションを@Keyframesで設定、animationプロパティでは、span要素が3秒かけて3回の再生を繰り返すようにCSSを適用しています。
animation-fill-modeにはforwardsが指定してあるため、アニメーションが終了すると、forwardsの適用によりspan要素のテキスト「Challenge animation」は終点の水色で表示されます。
最後に、CSSのanimationプロパティで複数の@Keyframesを適用する使い方です。
@keyframes animation {
0% {
color:#a287eb;
}
100% {
color:rgb(90, 205, 203);
}
}
@keyframes fadein-left {
0% {
transform: translateX(-200px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
セレクタ {
animation:
animation 3s 2 both,
fadein-left 1s ease;
}
animationでは、複数のキーフレームの設定を「, カンマ」で区切って適用することができます。
上記のanimationプロパティでも、色を変化させる@Keyframesとスライドさせる@Keyframesをカンマで区切って適用した使い方をしています。
まとめ
CSSのkeyframesとanimationの使い方を覚えるために書いた今回の投稿。
@Keyframesもanimationプロパティも基本の使い方を理解できれば応用するのは難しくはないかと思います。
アニメーションをどのように再生したいのか自分なりのアイデアがあるのでしたら、そのアニメーションにはどんなCSSのプロパティと値が必要なのかを決めてKeyframesに設定していく。
そしてanimationプロパティで@Keyframesの設定をどのくらいの再生時間や繰り返しで動作させるか。
いろいろなアイデアをKeyframesとanimationに組み込んで試してみると、動きのある結果を表示で得られるのでCSSを使うことすら楽しくなってきます。
