はじめに

こんにちは！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 studio-nnc (@studio-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 studio-nnc (@studio-nnc) on CodePen.

サーチライトのアニメーション

CSSのclip-pathプロパティを使って円のマスクを作り、円を移動させることでサーチライトに見立てています。ローディングアニメーションなどに使っても面白そうですね。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

風船が飛んでいくGOTOTOPボタン

GOTOTOPの風船をクリックしようとすると、ふわっと風船が飛んでいってしまうアニメーションです。ちゃんとボタンがクリックできるよう、飛んでいく速度は比較的ゆっくりがいいかもしれません。
imgで風船の画像を配置し、ホバー時にpositionの位置とtransform:translateYで横の位置を調節しています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

まとめ

今回の記事ではtransition、animationプロパティの違いや記述の仕方、またそれらを応用して作るアニメーションをご紹介しました！
それぞれの違いや特徴を活かして、オリジナルのアニメーションを作る参考になれば嬉しいです。

STUDIO NNC 合同会社ではさまざまなアニメーション表現を得意としています。
制作のご相談がございましたら、お気軽にコンタクトフォームよりお問い合わせください！

参考にさせていただいたサイト、記事はこちらです：

• https://coco-factory.jp/ugokuweb/css02/
• https://developer.mozilla.org/ja/docs/Web/CSS