模写修行メディア

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

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

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

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


💡 コーディングの練習なら模写修行!

無料教材もあります!

【学べること】

  • 実務のレベル感を知りたい
  • プロの制作フローを学びたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい
公式サイトを見る
コーディング教材の【模写修行】は他の教材と何が違うのか?

この記事の目次

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 を使って実装できないか?』は意識すると良いです。

超実務向け!コーディングの練習が出来るサービス作りました 🎉

模写修行

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ!

  • 実務のレベル感を知りたい
  • プロの制作フローを学びたい
  • 何を考えながらコードを書くのか知りたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい

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

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか?

無料教材もあります!👍

模写修行を見る

脱初心者!自信を持ってプロと言えるスキルを!

嬉しい声もいただいています!

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました!
TwitterでDMいただきました!🙇

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです!解説記事もわかりやすい...!
Tweet

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

無料教材もあります!👍

模写修行を見る

脱初心者!自信を持ってプロと言えるスキルを!

オススメweb制作の学習サイト17選!

👉詳しく見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

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

\Share/

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

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