はじめに

こんにちは！NNCの大土です。
今回はCSSアニメーションの実装には欠かせないtransition・animationプロパティについてご紹介をします。

WEBサイトでただコンテンツが並んでいるだけではなく、表現に動きをつけてあげることによって、目を惹く・印象に残りやすいデザインを作ることができるアニメーション。
さまざまなWEBサイトがあるなかで、そのサービスや企業オリジナルの雰囲気の演出・差別化にも役立つ、もはや必須と言ってもよい技術となっています。

後半でご紹介する活用例はHTML・CSSのコードを載せていますので、コピペして使っても、アレンジして使っていただいても構いません。

それでは、本題に入っていきます！

アニメーションの基本とtransition・animationの違い

前述のとおり、CSSでアニメーションを表現する場合transition・animationプロパティの理解が必要になります。

アニメーションを作るときの基本的な考え方として、時間を決め、その中で何をどのように変化させるかが大事になります。

以下はマウスを合わせた時にボタンの色を切り替えるアニメーションの例です。
上のボタンは色が一瞬で切り替わるのに対し、
下のボタンは色が0.5秒間かけて青から赤に変化していることがわかると思います。

時間・状態の変化などといった考え方はtransition・animationのどちらのプロパティでも共通となりますが、それぞれの違いは以下のとおりです。
ユーザーの操作が必要かどうか、という点が特に大きな違いとなります。

違いがわかったところで、transition・animationプロパティの具体的な使い方について解説していきます。

transitionプロパティ

transitionは、ユーザーがボタンにカーソルを合わせるなど何か操作を行うタイミングで、アニメーションを発生させることができるプロパティです。
アニメーション時間・開始の遅延などを設定するための細かいプロパティが用意されており、それらを組み合わせてアニメーションを表現します。

プロパティの種類はこちらです。

transition-duration

何秒間かけてアニメーションさせるのかを指定するため、必ず記述が必要になります。
数値の後ろに〜秒間を表すsをつけます。1.5sなら1.5秒間です。

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

transition-delay

何秒遅らせてアニメーションを始めるのかを指定します。
初期値は0sなので、必要ない場合は記述しなくてOKです。

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

transition-property

具体的にどのCSSプロパティをアニメーションさせるのかを指定します。
例えば背景色のみを徐々に変化させたい、という場合は値にbackground-colorを記述します。
初期値はallとなっており、何も記述しない場合はアニメーション前後で値が異なるプロパティを全て変化させることになります。

下の例では、transition-property: background-colorの方は背景色のみがゆっくり変わる（文字の色は瞬時に変わる）のに対し、transition-property: allの方は背景色・文字色も1秒かけて変化しています。

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

transition-timing-function

transition-durationで指定した秒数の間、どのような進捗でアニメーションさせるかを指定することができます。
値は以下の種類から選ぶことができます。

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

cubic-bezierは自由に設定ができる一方で考え方が難しいものになります。
事前に数値をシミュレーションできるサイトや、チートシートを提供してくれているサイトがあるので、そちらをご参考ください。

参考：
cubic-bezier.com
イージング関数チートシート

transition

transition-⚪︎⚪︎プロパティの命令をまとめて記述することができます。
命令の順番の決まりはありませんが、transition-delayとtransition-durationは注意が必要です。

• ・transition-delayとtransition-durationを両方設定する場合：先に書いた数値がtransition-durationになります。
• ・1つだけ記述した場合：transition-durationが適用されます。

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

またtransitionを使用する際の注意点として、
例えばマウスを離したときに急に最初の状態に戻るのではなくアニメーションさせながら戻したい場合は、元の記述にもtransitionの命令を入れておく必要があります。

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

animationプロパティ

transitionよりもさらに細かくアニメーションの設定ができ、マウスを重ねるなどのきっかけがなくても自動でアニメーションさせることができます。

プロパティの種類はこちらです。

animation-name

アニメーションの名前をつけるためのプロパティです。この名前に対して、@keyframes という定義を行います。
@keyframes とはアニメーションの各ステップを指定するためのルールのことで、以下の形で命令します。

@keyframes アニメーションの名前 { 状態の変化 }　

状態の変化の書き方は開始時（0%）・終了時（100%）の2地点のみ設定するほか、開始時・終了時の間に複数地点を設けることもできます。

2地点を設定する例　青→赤に変化する

@keyframes bgAnime {

    0% {
        background-color: #99ccff; /* 青 */
    }

    100% {
        background-color: #ff9999; /* 赤 */
    }
}

2地点を指定する場合は0%はfrom、100%はto　と記述してもOKです。

複数地点を設定する例　青→緑→赤に変化する

@keyframes bgAnime {

    0% {
        background-color: #99ccff; /* 青 */
    }

    50% {
        background-color: #99ff99; /* 緑 */
    }

    100% {
        background-color: #ff9999; /* 赤 */
    }

}

それぞれ以下のようなアニメーションを表現することができます。

animation-duration・animation-delay・animation-timing-function

こちらの3つはtransitionプロパティと同様の考え方になるので、そちらをご参考ください。

animation-fill-mode

アニメーションする前と後でどの状態にするかを指定することができます。

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

animation-iteration-count

1つのアニメーションを何回再生するかを指定することができます。

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

animation-direction

アニメーション再生の方向を指定することができます。

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

animation

trantion同様、上記のプロパティをまとめて設定することができます。

それでは、ここからはアニメーションサンプル・活用例をご紹介していきます。

アニメーション例：擬音表現編

ゆらゆら

要素を左右にゆらゆら揺れているアニメーションです。
translateプロパティで左右の移動を、rotateプロパティで傾きをつけてあげることで、だるまさんがゆらゆらしている要素を表現しています。

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

ふわふわ

要素を上下左右にふわふわ移動させたアニメーションです。
translateプロパティでX軸・Y軸の移動距離を指定することで、UFOがふわふわ移動している要素を表現しています。
animation-directionの値をalternateにすることで浮遊しながら行ったり来たりするように見せることができます。

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

ぽよん

要素がバウンドしたときにぽよんと形状が変わる様子を表したアニメーションです。
0%から100%の間に細かくステップを作り、上からの距離（top）とボールの高さ（height）の値を交互に変えることでバウンドしているように見せつつ、ぽよんと形が変わるように設定しています。

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

アニメーション例：ボタン編

大きくなり、色が変わるボタン

マウスを当てたときにボタンが拡大し、同時に背景色を徐々に変化させるアニメーションです。ボタンということが分かりやすく、クリックを促してくれます。

ボタンをマウスオーバーした際にtransform: scale()でサイズ変更・background-colorで背景色の変更を行っています。
またtransitonを設定して滑らかに変化するようにしています。

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

キラッと光るボタン

マウスを当てたときにボタンが一瞬キラッと光るアニメーションです。
ボタンの上にbefore擬似要素を重ねておき、ホバーした際に擬似要素の大きさと角度、またopacityで透明度を変化させることでキラッと光る動きを再現しています。

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

色が変わり、矢印の装飾が動くボタン

マウスを当てた時にボタンの色が変わり、同時に矢印が右に動くアニメーションです。
before擬似要素で矢印の画像を準備しておき、ボタンをマウスオーバーした際に擬似要素のpositionの位置が変更されます。

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

色が反転するボタン

マウスを当てた時に時間をかけてボタンの色が反転するアニメーションです。
ポイントとしてはbefore擬似要素を重ねておき、translateプロパティを使ってホバーする前とした後で大きさを変化させることで、左から右へ徐々に色が移り変わる作りになっています。

See the Pen Untitled by studio-nnc (@studio-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 studio-nnc (@studio-nnc) on CodePen.

ナビゲーションメニュー1

メニューにカーソルを合わせたとき、中央からスッとラインが出てくるアニメーションです。
シンプルながらもちょっとした動きをつけたいときにおすすめです。

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

ナビゲーションメニュー2

メニューにカーソルを合わせたとき、メニューの文字がバウンドします。
ホバー時にanimationの%の数値を細かく設定し、transform: translateYを使って上下に動かす仕様になっています。
元気な印象を持たせたいときにおすすめのアニメーションです。

See the Pen Untitled by studio-nnc (@studio-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プロパティの違いや使い方、またそれらを応用して作るアニメーションをご紹介しました！
それぞれの違いや特徴を活かして、みなさまのCSSアニメーション作成にお役立ていただければ嬉しいです。

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

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

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