アニメーションのあるサイトはおしゃれな印象を与えることができます。CSSでアニメーションをつけるプロパティはtransitionが代表的ですが、transitionでは簡単なアニメーションしか実装できません。
そこでCSSアニメーションを使用すれば高度なアニメーションが実装できます。CSSアニメーションとはanimationプロパティと@keyframeの記述を組み合わせた実装方法です。CSSアニメーションはプロパティが多く使いこなすのは困難ですが、マスターすればWeb制作スキルが格段に上がります。
この記事ではCSSアニメーションの使い方を解説します。現場で使えるサンプルも表示しているので参考にしてください。
- CSSアニメーションの構成
@keyframesの指定方法animationの指定方法
手軽なアニメーションを実装したい方はtransitionを使用しましょう。transitionの使い方はこちらの記事で解説しています。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
CSSアニメーションの構成
CSSアニメーションではanimationプロパティと@keyframesを組み合わせることで高度なアニメーションを実装できます。
animationプロパティではアニメーションの秒数や回数を指定し、@keyframesではアニメーションがどのように変化するかを指定します。
CSSアニメーションの基本形
まずはサンプルで基本形を確認しましょう。
animationと@keyframesを使用するCSSアニメーションの基本形は以下です。
See the Pen css-animation-sample by ZeroPlus (@zeroplus-programming) on CodePen.
@keyframesの指定方法
@keyframesの中にはアニメーションがどのように変化するかを記述します。
指定方法は以下の2つです。
- 0%~100%で指定する
- to~fromで指定する
0%~100%で指定する
@keyframesは0%~100%の数値を指定できます。
記述例は以下のようになります。
@keyframes animation{
0%{
/*アニメーションを開始するときのCSSを記述*/
}
50%{
/*アニメーションの中間のCSSを記述*/
}
100%{
/*アニメーションを終了するときのCSSを記述*/
}
}from~toで指定する
0~100%はfrom~toと指定しても同じ動きになります。
記述例は以下のようになります。
@keyframes animation{
from{
/*アニメーションを開始するときのCSSを記述*/
}
to{
/*アニメーションを終了するときのCSSを記述*/
}
}
animationの指定方法
animationはアニメーションの名前や秒数、回数などを決められるプロパティです。
animationには多くの種類があり、それぞれの場面に応じて適切なプロパティを選択します。
animation-name
animation-nameはアニメーションに名前をつけるプロパティです。半角英数字で任意の名前を指定します。
CSSアニメーションで実装するときは「このアニメーションはこの名前」という定義が必要です。この定義名に対して@keyframesでアニメーションの変化を指定します。
記述例は以下のようになります。
.class{
animation-name: animation;/*"animation"という名前のアニメーションを定義する*/
}ここで定義した名前を@keyframesに記述することで、初めてCSSアニメーションが機能します。
@keyframes animation/*ここに定義名を記述する*/{
0%{
/*アニメーションを開始するときのCSSを記述*/
}
100%{
/*アニメーションを終了するときのCSSを記述*/
}
}animation-duration
animation-durationはアニメーションの秒数を指定するプロパティです。初期値は0s、指定できる単位はs（秒）かms（ミリ秒）です。
記述例は以下のようになります。
animation-duration: 1s;/*1秒かけてアニメーションさせる*/See the Pen animation-duration by ZeroPlus (@zeroplus-programming) on CodePen.
animation-delay
animation-delayはアニメーションの開始を遅らせるプロパティです。初期値は0s、指定できる単位はs（秒）かms（ミリ秒）です。
記述例は以下のようになります。
animation-delay: 1s;/*アニメーションの開始を1秒遅らせる*/See the Pen animation-delay by ZeroPlus (@zeroplus-programming) on CodePen.
animation-timing-function
animation-timing-functionはアニメーションの進行度合いを設定するプロパティです。
初期値はease、指定できる値は次の7つです。
| 指定できる値 | 値の意味 |
| ease（初期値） | 開始時と終了時の動きをなめらかにする |
| ease-in | 開始時だけなめらかにする |
| ease-out | 終了時だけなめらかにする |
| ease-in-out | easeよりもゆっくり変化させる |
| linear | 一定の速度で変化させる |
| steps | コマ送りのように変化させる |
| cubic-bezier | 変化の度合いをX軸・Y軸で変化させる |
記述例は以下のようになります。
animation-timing-function: ease;/*アニメーションの進行度合いを設定する*/See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
animation-fill-mode
animation-fill-modeはアニメーション終了時の状態を指定するプロパティです。
初期値はnone、指定できる値は次の4つです。
| 指定できる値 | 値の意味 |
| none（初期値） | 指定なし |
| forwards | 終了時の状態を維持する |
| backwards | 開始時の状態に戻る |
| both | 開始時に"forwards"、終了時に"backwards"を適用する |
記述例は以下のようになります。
animation-fill-mode: forwards;/*アニメーション終了時の状態*/See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
animation-iteration-count
animation-iteration-countはアニメーションがループする回数を指定するプロパティです。
数値を指定するとその数だけアニメーションがループします。infiniteを指定すると無限にループさせることができます。初期値は1です。
記述例は以下のようになります。
animation-iteration-count: infinite;See the Pen animation-iteration-count by ZeroPlus (@zeroplus-programming) on CodePen.
animation-direction
animation-directionはアニメーションの向きを指定するプロパティです。初期値はnormal、指定できる値は以下の4つです。
| 指定できる値 | 値の意味 |
| normal（初期値） | 通常通りの動き |
| reverse | 逆方向の動き |
| alternate | 奇数回で通常、偶数回で逆の動き |
| alternate-reverse | 奇数回で逆、偶数回で通常の動き |
記述例は以下のようになります。
animation-direction: normal;See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
animationでまとめて指定する
animationプロパティはまとめて指定することもできます。このような指定の仕方をショートハンドといいます。
animationプロパティをショートハンドで指定する場合の記述例は以下のようになります。
animation: animation forwards 3s infinite ease 5s alternate;
animation: 名前 終了時の状態 アニメーションの秒数 ループの回数 進行度 開始までの秒数 アニメーションの向き;指定の順番は特にありませんが、durationとdelayについては先に記述した数値がdurationとなるので注意しましょう。
CSSアニメーションの現場で使えるサンプル
テキストが動くアニメーション
テキストのアニメーションをつける実装はファーストビューなどで使うことが多いです。フェードインやスライドインなど様々な演出があります。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
ローディングアニメーション
JavaScriptやCSSアニメーションを多く使っているサイトは読み込みが遅くなる場合があります。サイトの読み込みが遅い場合はユーザーにストレスを感じさせないようにローディング画面を実装します。このような場面でもCSSアニメーションを使用します。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
雪や紙吹雪のアニメーション
CSSアニメーションを使用して雪や紙吹雪の演出も可能です。このような演出があるとサイトにリッチな印象を加えられます。
雪のアニメーション
See the Pen 雪アニメーション by ZeroPlus (@zeroplus-programming) on CodePen.
紙吹雪のアニメーション
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
まとめ
CSSアニメーションはプロパティが多く使いこなすのは困難です。しかしこれらの表現ができるようになればあなたのWeb制作スキルは非常に高くなります。Web制作のレベルアップとしてCSSアニメーションを学習してみましょう。
CSSアニメーションまとめ
- CSSアニメーションでは
animationと@keyframesを使用する animation-nameでアニメーションの名前を定義する@keyframesで定義したアニメーションを指定する- 数多くのプロパティがあり様々な表現が可能
- マスターすればWeb制作のスキルが格段にアップ
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
