CSSだけでOK! transition・animationで動き・アニメーションを実装する

はじめに

こんにちは!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-delaytransition-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-duration1回のアニメーション時間を指定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アニメーションの最初の状態で終了
bothforwardsと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%の流れで再生
reverse100%→0%の流れで再生
alternate2回以上再生する場合、
奇数回は0%→100%の流れで再生
偶数回は100%→0%の流れで再生
alternate-reverse2回以上再生する場合、
奇数回は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 合同会社ではさまざまなアニメーション表現を得意としています。
制作のご相談がございましたら、お気軽にコンタクトフォームよりお問い合わせください!

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

こちらの記事はいかがでしたか?
+1
3
+1
0
+1
0
+1
0

【PR】Tech Tech Zoo

【PR】オリジナルキャラクター「てくてくず」を公開しました!

作品は、随時X(旧Twitter)で公開していきます!
ぜひ「てくてくず」の作品を応援していただけたら嬉しいです。

X(旧Twitter)アカウントはこちら:
https://twitter.com/tech_tech_zoo

RECENT ENTRIES

  • 【jQuery】特定範囲内で表示・スクロール追従するメニュー / サイドバー【レスポンシブ対応】

    VIEW MORE
  • 【WordPress】タイトルにマッチしたタグの記事一覧を表示する方法と注意点

    VIEW MORE
  • コンテンツ内(要素内)でのスクロールを作成・制御する方法【overflowプロパティ】

    VIEW MORE

CONTACT

contact