模写修行メディア

CSSアニメーション入門!transitionとanimationを解説!

CSSアニメーションはコーディングの中でも、難しい分野の1つです。

アニメーションを加えることができると、表現の幅が広がるので、この機会にぜひ学習してみてください。

この記事では、CSSアニメーションに関して、基礎からサンプルを交えて紹介します。

CSSアニメーションとは

CSSアニメーションは、CSSだけでアニメーションを実装できる仕様です。

  • transitionプロパティを使った方法
  • animationプロパティを使った方法

CSSアニメーションには、上の2つがあります。それぞれできることに違いがあるので、まずは簡単に特徴を紹介します。

transitionプロパティを使った方法の特徴

  • 初め(0%)と終わり(100%)の状態を指定してその間の変化をアニメーションする
  • hoverなどのトリガーが必要

transitionプロパティで指定できるのは、初めと終わりの状態のみなので、シンプルなアニメーションしか実装できません。リンクやボタンをhoverした時のアニメーションによく使います。

transitionプロパティを使った方法の特徴

このように2点間の変化を指定して、その間をスムーズにアニメーションさせるのがポイントです。

animationプロパティを使った方法の特徴

  • 任意のポイントの状態を指定してその間の変化をアニメーションする
  • 無限にアニメーションできる
  • hoverなどのトリガーが必須でない

transitionプロパティを使った方法より、より詳細な設定ができるので、複雑なアニメーションも可能です。transitionプロパティでできるアニメーションは、animationプロパティを使ってもできます。

animationプロパティを使った方法の特徴

transitionプロパティは2点でしたが、animationプロパティは2点以上で何点でも指定できます。

transitionプロパティを使ったアニメーションを詳しく紹介

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • transition(ショートハンド)

上の5つのtransition関連のプロパティを紹介します。

著者コメント
個人的にtransitionプロパティは、数も少ないので、ショートハンドを使って指定しています。

transition関連の各プロパティ紹介

.hoge {
    /* ショートハンドを使った書き方 */
    transition: background-color 0.5s ease 1s;
}
.hoge02 {
    /* 個別に指定する書き方 */
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-delay: 1s;
}

.hoge.hoge02は同じ指定です。ショートハンドで書く際の順番は、transition-duration:transition-delayより先に書けば、あとは順不同です。

※ 初期値と同じ値であれば、本来書く必要はありません。今回はわかりやすいように全て書きました。

.hoge {
    /* 👇 transition: all 0.5s ease 0; と同じ */
    transition: 0.5s;
}

よくこのような指定を見かけます。値を省略すると、初期値が入ります。上の場合、transition: all 0.5s ease 0;と同じ意味になります。

allにするとプロパティの組み合わせによって、予期しない挙動になるので、プロパティは省略しない方が良いです。


💡 transition-property

.hoge {
    transition-property: background-color; /* 👈 背景色をアニメーションさせる */
}
.hoge02 {
    transition-property: box-shadow; /* 👈 影をアニメーションさせる */
}

※ 初期値はall(全ての要素)

transition-propertyは、何をアニメーションさせるか、指定します。

.transition-sample {
    ...
    transition: background-color 0.5s ease 1s;
}

.transition-sample:hover {
    background-color: #ea4335;
    color: #000;
}

例えばこのような指定があった場合、アニメーションするのはbackground-colorだけです。colorはアニメーションせずに、瞬時に変化します。colorもアニメーションさせたい場合の書き方は、後述します。


💡 transition-duration

.hoge {
    transition-duration: 1s; /* 👈 1秒かけてアニメーションする */
}

※ 初期値は0

transition-durationは、何秒かけてアニメーションさせるか、指定します。

transition: 1s;のようにショートハンドで指定した場合、この1sはtransition-durationの値になります。後述するtransition-delayの値ではないので、混同しないように気をつけましょう。


💡 transition-timing-function

.hoge {
    transition-timing-function: linear;
}
.hoge02 {
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.22, 1.49);
}

※ 初期値はease

transition-timing-functionは、アニメーションの動きの加減速(イージング)を、指定します。

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • steps

元々用意されている、主な値です。これらを使わずに、cubic-bezierを使って自分でイージングを定義することもできます。

startを押すとアニメーションが始まります。どんな動きになるのか、確認してみてください。(アニメーション後に再度startを押すとリセットされます)

cubic-bezierの設定は、テキストだけでは凄くわかりにくいと思いますが、視覚的に設定する方法があるので、後述します。


💡 transition-delay

.hoge {
    transition-delay: 1s; /* 👈 1秒後にアニメーションが開始する */
}

※ 初期値は0

transition-delayは、何秒後にアニメーションを開始させるか、指定します。

要素を順番にアニメーションしたい場合などに使えます。

複数のプロパティをアニメーションさせる場合はカンマ区切りで書く

.hoge {
    transition: background-color 1s ease-in, color 1s ease-in;
}

背景色と文字色のどちらもアニメーションしたい場合は、上のようにカンマ区切りで書きます。

.hoge {
    transition-property: background-color, color;
    transition-duration: 1s; /* 👈 1s, 1sと同じ */
    transition-timing-function: ease; /* 👈 ease, easeと同じ */
}

個別に指定する場合、同じ値は省略すると、引き継いでくれます。

transitionendイベント

const button = document.querySelector(".js-button");
button.addEventListener('transitionend', () => console.log("アニメーション終了"));

アニメーションが終了すると、transitionendイベントが発火します。終了後になんらかの処理をしたい場合に使えます。

アニメーション終了時に発火するので、この動画のように、マウスオーバー時もマウスアウト時もアニメーションを入れていると、2回発火することになります。

animationプロパティを使ったアニメーションを詳しく紹介

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state
  • animation(ショートハンド)

上の9つのanimation関連のプロパティを紹介します。

著者コメント
個人的にanimationプロパティは、数が多く、わかりにくいのでショートハンドを使っていません。

キーフレーム

animation関連のプロパティ紹介の前に、キーフレームについて触れておきます。

animationプロパティを使ったアニメーションでは、キーフレームを使って、任意の点の状態を指定し、その間をアニメーションすることになります。

@keyframes colorAnimation {
    from {
        background-color: red;
    }

    to {
        background-color: blue;
    }
}

例えば、上の指定は、開始の状態(背景赤)から終了の状態(背景青)を定義して、この間をアニメーションさせることになります。この例ではcolorAnimationという名前にしていますが、ここは自由に決めることができます。

.hoge {
    animation-name: colorAnimation;
    ...
}

@keyframes colorAnimation {
    from {
        background-color: red;
    }

    to {
        transform: blue;
    }
}

このようにキーフレームと後述する、animation-nameを対応させることでアニメーションさせることができます。

@keyframes colorAnimation {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
        border-radius: 50%;
    }
    100% {
        background-color: green;
    }
}

任意の点を指定して、細かく定義することもできます。fromは0%と同じ、toは100%と同じです。

animation関連の各プロパティ紹介

.hoge {
    /* ショートハンドを使った書き方 */
    animation: hogeAnimation 3s ease-in 2s 5 reverse forwards running;
}
.hoge02 {
    /* 個別に指定する書き方 */
    animation-name: hogeAnimation;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    animation-delay: 2s;
    animation-iteration-count: 5;
    animation-direction: reverse;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

.hoge.hoge02は同じ指定です。ショートハンドで書く際の順番は、animation-durationanimation-delayより先に書けば、あとは順不同です。

※ 初期値と同じ値であれば、本来書く必要はありません。今回はわかりやすいように全て書きました。


💡 animation-name

.color { animation-name: colorAnimation; }
.scale{ animation-name: scaleAnimation; }

@keyframes colorAnimation { ... }
@keyframes scaleAnimation { ... }

キーフレームと対応付けるためのプロパティです。


💡 animation-duration

.hoge {
    animation-duration: 3s; /* 👈 3秒かけてアニメーションする */
}

※ 初期値は0

transitionと同じく、何秒かけてアニメーションさせるか、指定します。


💡 animation-timing-function

.hoge {
    animation-timing-function: ease-in;
}

※ 初期値はease

transitionと同じく、アニメーションの動きの加減速(イージング)を、指定します。あらかじめ用意されているイージングや、指定方法もtransitionの時と同じです。


💡 animation-delay

.hoge {
    animation-delay: 2s; /* 👈 2秒後にアニメーションが開始する */
}

※ 初期値は0

transitionと同じく、何秒後にアニメーションを開始させるか、指定します。


💡 animation-iteration-count

.hoge {
    animation-iteration-count: 5; /* 👈 5回アニメーションを繰り返す */
}

※ 初期値は1

animation-iteration-countは、何回アニメーションを繰り返すか、指定します。

.hoge {
    animation-iteration-count: 0.3; /* 👈 30%までで終わる */
}
.hoge02 {
    animation-iteration-count: 2.5; /* 👈 3回目の50%までで終わる */
}

非整数の値も使えます。0.3と指定した場合、30%までで終わることになります。

.hoge {
    animation-iteration-count: infinite; /* 👈 無限に繰り返す */
}

infiniteを使うと無限にアニメーションを繰り返すことができます。


💡 animation-direction

.hoge {
    animation-direction: reverse;
}

※ 初期値はnormal

animation-directionは、アニメーションの方向を、指定します。

動き
normal0%→100%の方向でアニメーション
繰り返す場合はまた0%→100%に戻る
reverse100%→0%の方向でアニメーション
繰り返す場合はまた100%→0%に戻る
alternate0%→100%の方向でアニメーション
繰り返す場合は折り返す
alternate-reverse100%→0%の方向でアニメーション
繰り返す場合は折り返す

テキストより、実際に見た方がわかりやすいと思うので、下のcodepenを確認してみてください。

startを押すとアニメーションが始まります。4回繰り返すようになっています。


💡 animation-fill-mode

.hoge {
    animation-fill-mode: forwards;
}

※ 初期値はnone

animation-fill-modeは、キーフレームで指定したスタイルをアニメーション開始前や終了後に適応するかを、指定します。

動き
none適用しない
forwardsアニメーション後に終わりのスタイルが適応
backwardsアニメーション前に初めのスタイルが適応
bothアニメーション後と前にスタイルが適応(forwardsとbackwardsの両方適応)

下のcodepenを確認してみてください。

.is-animation .box {
    animation-name: sampleAnimation;
    animation-duration: 3s;
    animation-delay: 3s;
}

@keyframes sampleAnimation {
0% { background-color: red; }
50% { background-color: blue; }
100% { background-color: green; }
}

startを押すと3秒後にアニメーションが始まります。コードは重要な部分だけ書いています。

backwardsとbothは3秒後のアニメーションのスタート前に、キーフレーム0%のスタイルが適応されています。forwardsとbothはアニメーション後もキーフレーム100%のスタイルが適応されたままです。


💡 animation-play-state

.hoge {
    animation-play-state: running;
}

※ 初期値はrunning

animation-play-stateは、アニメーションの実行中か停止中かを、指定します。

hoverなどのアクションや、JavaScriptを用いて、アニメーションの再生停止を制御できます。

複数のプロパティをアニメーションさせる場合はカンマ区切りで書く

.hoge {
    animation: hogeAnimation 3s ease-in 2s 5 reverse forwards running, hogeAnimation02 2s ease-in 2s 5 reverse forwards running,;
}

transitionと同じよに、カンマ区切りで書くことができます。

.hoge {
    animation-name: hogeAnimation, hogeAnimation02;
    animation-duration: 3s, 2s;
    animation-timing-function: ease-in; /* 👈 ease-in, ease-inと同じ */
    animation-delay: 2s; /* 👈 2s, 2sと同じ */
    ...
}

個別に指定する場合もtransitionと同じです。

animationendイベント

const boxs = document.querySelector(".js-boxs");
const button = document.querySelector(".js-button");
boxs.addEventListener('animationend', () => console.log("アニメーション終了"));

transitionendイベントと同じように、アニメーションが終了すると、animationendイベントが発火します。

イージング

前述した通り、イージングはデフォルトで備わっているものを使うか、cubic-bezierで定義します。

cubic-bezierの値はテキストで見てもイメージできませんが、Google Chromのディベロッパーツールを使うと、視覚的に調整が可能です。

ちなみにこの曲線をベジェ曲線と呼びます。

Easing Functions Cheat Sheetでは、様々なイージングを紹介しています。迷ったら、このサイトで紹介しているものを使ってみても良いかもしれません。

他にもイージング選びで参考になる記事を載せておきます。

キーフレーム内で指定すれば複雑なイージングも可能

@keyframes bounce {
    0% {
        ...
        animation-timing-function: ease;
    }
    50% {
        ...
        animation-timing-function: cubic-bezier(0.25, 0.1, 0.22, 1.49);
    }
    100% {
        ...
    }
}

このようにキーフレーム内で指定することで、0~50%ではease、50~100%ではcubic-bezier(0.25, 0.1, 0.22, 1.49)のような指定ができます。

バウンドする動きなど、これでよりリアルに表現できます。

Animate.cssを使うと簡単

Animate.cssを使うと用意されているクラスの付け外しで、簡単に良い感じのアニメーションができます。

用意されているのはアニメーションだけなので、クリックやスクロールなど、何かをトリガーにアニメーションさせる場合は、JavaScriptを書く必要があります。

お手軽で良いですが、ちゃんと理解して自分で書いた方が良いと、個人的には思っています。

パフォーマンスを意識した実装

アニメーションは負荷がかかる処理なので、パフォーマンスを意識した実装もできると良いです。

少しのアニメーションしかない場合は、誤差程度かもしれませんが、アニメーションを多用したリッチなサイトになると、書き方次第でスクロール時にガタついたりすることもあります。

長くなってしまうので、この記事では、詳しくは紹介しません。『これだけは覚えておくと良い!』ことだけ紹介します。(いずれ別記事で詳しく書く予定です)

transformとopacityを使う

結論だけにしますが、transformとopacityのアニメーションは負荷が軽い特徴があります。

例えば、ハンバーガーメニューでrigth: -200pxからrigth: 0までアニメーションさせているケースをたまに見かけます。これはtransformでも同じことができるので、置き換えた方がパフォーマンス的に良い書き方になります。

アニメーションをする際は、『transformとopacityを使って実装できないか?』は意識すると良いです。

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材