はじめに
こんにちは！NNCの大土です。
今回の記事では、アニメーション表現で使用するCSSのtransition・animationプロパティについて、またCSSだけで実装できるアニメーション表現・作例をご紹介していきます。
WEBサイトでただ静的コンテンツが並んでいるだけではなく、表現に動きをつけてあげることによって、目を惹く・印象に残りやすいデザインを作ることができるアニメーション。
さまざまなWEBサイトがあるなかで、こういったアニメーション表現はそのサービスや企業オリジナルの雰囲気を演出し、差別化にも役立つため、もはや必須と言っても良い技術になっています！
また、動きの表現というとjavascriptを使用するイメージを持っている方も多いと思いますが、CSSだけで再現できるアニメーション・動きも実はたくさんあります。
紹介するものは全てHTML・CSSのコードを載せていますので、コピペして使っても、アレンジして使っていただいても構いません。
それでは、本題に入っていきます！
アニメーションの基本 transition・animationプロパティ
まず初めに、CSSアニメーション作成の基本となるtransition・animationプロパティとはどんなものかについてお話をしていきます。
※もう知ってます！という方や、どんなものができるか早く知りたい！という方は3以降のアニメーション例にお進みください。
transitionプロパティ
アニメーションを作るときの基本的な考え方として、
時間を決め、その中で何をどのように変化させるか、が大事になります。
transitionプロパティは、例えばマウスが重なったら背景色が変わる、文字が大きくなる、など
アニメーションを発生させるためのきっかけが必要になります。
transitionにはいくつかの種類のプロパティがあり、それらを組み合わせて使うことで動きを表現します。
transitionプロパティの種類
| プロパティ名 | 説明 | 初期値 |
| transition-duration | アニメーションする時間を指定 | 0s |
| transition-delay | 何秒遅らせてアニメーションを始めるかを指定 | 0s |
| transition-property | どのCSSプロパティをアニメーションさせるのかを指定 | all |
| transition-timing-function | アニメーションの進捗タイミングを調整 | ease |
| transition | 上記のプロパティをまとめて設定できる | – |
- transition-duration
何秒間かけてアニメーションさせるのかを指定するため、必ず記述が必要になります。
数値の後ろに〜秒間を表すsをつけます。1.5sなら1.5秒間です。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
- transition-delay
何秒遅らせてアニメーションを始めるのかを指定します。
初期値は0sなので、必要ない場合は記述しなくてOKです。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
- transition-property
具体的にどのCSSプロパティをアニメーションさせるのかを指定します。
例えば背景色のみを徐々に変化させたい、という場合は値にbackground-colorを記述します。
初期値はallとなっており、何も記述しない場合はアニメーション前後で値が異なるプロパティを全て変化させることになります。
下の例では、transition-property: background-colorの方は背景色のみがゆっくり変わる（文字の色は瞬時に変わる）のに対し、transition-property: allの方は背景色・文字色も1秒かけて変化しています。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
- transition-timing-function
transition-durationで指定した秒数の間、どのような進捗でアニメーションさせるかを指定することができます。
以下の種類から選ぶことができます。
| 値の種類 | 内容 |
| ease（初期値） | 途中まで加速し、そこからは減速 |
| ease-in | ゆっくり始まり徐々に加速 |
| ease-out | はやく始まり徐々に減速 |
| ease-in-out | ゆっくり始まり加速、途中からは減速 |
| linear | 一定の速度で進行 |
| cubic-bezier(0,0,0,0) | 進行具合を自由に決めることができる 0の箇所に0〜1の数値を入れて変化の度合いを調整 |
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
cubic-bezierは自由に設定ができる一方で考え方が難しいものになります。
事前に数値をシミュレーションできるサイトや、チートシートを提供してくれているサイトがあるので、そちらを参考にしていただくと良いと思います。
参考：cubic-bezier.com
イージング関数チートシート
- transition
上記の命令をまとめて記述することができます。
命令の順番の決まりはありませんが、transition-delayとtransition-durationは注意が必要です。
・transition-delayとtransition-durationを両方設定する場合：先に書いた数値がtransition-durationになります。
・1つだけ記述した場合：transition-durationが適用されます。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
またこれらのtransitionプロパティを使用する際の注意点として、
例えばマウスを離したときに急に最初の状態に戻るのではなくアニメーションさせながら戻したい場合は、元の記述にもtransitionの命令を入れておく必要があります。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
animationプロパティ
先ほどのtransitionよりもさらに細かくアニメーションの設定ができ、マウスを重ねる、などのきっかけがなくてもアニメーションを実装することができます。
@keyframes＋アニメーション名 の形で記述し、アニメーション開始〜終了までに何をどのように変化させるかを指定します。
まずanimationプロパティの種類はこちらです。
animationプロパティの種類
| プロパティ名 | 説明 | 初期値 |
| animation-name | アニメーションの名前 | none |
| animation-duration | 1回のアニメーション時間を指定 | 0s |
| animation-delay | 何秒遅らせてアニメーションを始めるかを指定 | 0s |
| animation-timing-function | アニメーションの進捗タイミングを調整 | ease |
| animation-fill-mode | アニメーション前と後の状態を指定 | none |
| animation-iteration-count | アニメーションの再生回数・連続再生の指定 | 1 |
| animation-direction | アニメーション再生の方向の指定 | normal |
| animation | 上記のプロパティをまとめて設定 | – |
- animation-name
アニメーションの名前をつけるためのプロパティです。
この名前に対して、@keyframes以下で具体的なアニメーションの動きを指定します。
@keyframes bgAnime {
0% {
background-color: #fff;
}
100% {
background-color: #000;
}
}上記の命令の場合、背景色が白から黒に徐々に変化していきます。
必ず初めは0%、最後は100%とし、例えば0% 50% 100% のように間に任意の数値を入れることもできます。
- animation-duration
- animation-delay
- animation-timing-function
こちらの3つはtransitionプロパティと同様の考え方になるので、そちらを参考にしてみましょう！
- animation-fill-mode
アニメーションする前と後でどの状態にするかを指定することができます。
| 値の種類 | 内容 |
| none（初期値） | 指定なし |
| forwards | アニメーションの最後の状態で終了 |
| backwards | アニメーションの最初の状態で終了 |
| both | forwardsとbackwardsの両方 |
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
- animation-iteration-count
1つのアニメーションを何回再生するかを指定することができます。
| 値の種類 | 内容 |
| 1（初期値） | 1回だけ再生 |
| 回数 | その回数分だけ再生 |
| infinite | 無限に再生 |
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
- animation-direction
アニメーション再生の方向を指定することができます。
| 値の種類 | 内容 |
| normal（初期値） | 0%→100%の流れで再生 |
| reverse | 100%→0％の流れで再生 |
| alternate | 2回以上再生する場合、 奇数回は0%→100%の流れで再生 偶数回は100%→0%の流れで再生 |
| alternate-reverse | 2回以上再生する場合、 奇数回は100%→0%の流れで再生 偶数回は0%→100%の流れで再生 |
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
- animation
trantion同様、上記のプロパティをまとめて設定することができます。
それでは、いよいよこれらを使ってどんなアニメーションを作ることができるか、以下でご紹介していきます！
アニメーション例：ボタン編
大きくなり、色が変わるボタン
マウスを当てたときにボタンが拡大し、同時に背景色を徐々に変化させるアニメーションです。ボタンということが分かりやすく、クリックを促してくれます。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
キラッと光るボタン
マウスを当てたときにボタンが一瞬キラッと光るアニメーションです。
ポイントとしてはボタンの上にbefore擬似要素を重ねておき、ホバーした際に擬似要素の大きさと角度、またopacityで透明度を変化させることでキラッと光る動きを再現しています。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
色が変わり、矢印の装飾が動くボタン
マウスを当てた時にボタンの色が変わり、同時に矢印が右に動くアニメーションです。
シンプルなボタンと併用することで、サイト内リンクや外部リンクなどを使い分けたいときにも効果的なアニメーションです。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
色が反転するボタン
マウスを当てた時に時間をかけてボタンの色が反転するアニメーションです。
ポイントとしてはbefore擬似要素を重ねておき、transform:translateXを使ってホバーする前とした後で大きさを変化させることで、左から右へ徐々に色が移り変わるような作りになっています。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
アニメーション例：文字装飾編
テキストがだんだん表示される
テキストが徐々に表示されるアニメーションです。
テキストの上に背景色と同じ色のbefore擬似要素を重ねておき、animationプロパティを使って左から右へ移動させるイメージです。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
テキストにマーカーを引く
テキストにマーカーをひくアニメーションです。
文章で大事な箇所・キャッチコピーを引き立たせるのに使えそうです。
アニメーションでマーカーを引いている様子を再現するために、before擬似要素にbackground:linear-gradientの命令を出すことでマーカー部分を用意しておき、animationプロパティでその横幅を0から100%にしています。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
ナビゲーションメニューのアニメーション1
メニューにカーソルを合わせたとき、中央からスッとラインが出てくるアニメーションです。
シンプルながらもちょっとした動きをつけたいときにおすすめです。
線の太さを変えることで、スタイリッシュにもポップにも表現することができそうです。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
ナビゲーションメニューのアニメーション2
メニューにカーソルを合わせたとき、メニューの文字がバウンドします。
ホバー時にanimationの%の数値を細かく設定し、transform: translateYを使って上下に動かす仕様になっています。
元気な印象を持たせたいときにおすすめのアニメーションです。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
アニメーション例：おもしろ編
他にも、transition・animationプロパティを工夫するとこんなおもしろ表現も作ることができます。
どこで使うんだ・・？というものもあるかもしれませんが…笑
アニメーション表現のアイディアのヒントになれば嬉しいです！
車窓から見える風景
animationプロパティを使って、横長の背景画像を左から右へ移動させています。
窓の内側を不透明度10%にした画像をimgタグで配置しています。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
サーチライトのアニメーション
CSSのclip-pathプロパティを使って円のマスクを作り、円を移動させることでサーチライトに見立てています。ローディングアニメーションなどに使っても面白そうですね。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
風船が飛んでいくGOTOTOPボタン
GOTOTOPの風船をクリックしようとすると、ふわっと風船が飛んでいってしまうアニメーションです。ちゃんとボタンがクリックできるよう、飛んでいく速度は比較的ゆっくりがいいかもしれません。
imgで風船の画像を配置し、ホバー時にpositionの位置とtransform:translateYで横の位置を調節しています。
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
まとめ
今回の記事ではtransition、animationプロパティの違いや記述の仕方、またそれらを応用して作るアニメーションをご紹介しました！
それぞれの違いや特徴を活かして、オリジナルのアニメーションを作る参考になれば嬉しいです。
STUDIO NNC 合同会社ではさまざまなアニメーション表現を得意としています。
制作のご相談がございましたら、お気軽にコンタクトフォームよりお問い合わせください！
参考にさせていただいたサイト、記事はこちらです：
