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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

👆 メンターやってます 👆

CSS アニメーションとは

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

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

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

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

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

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

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

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

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

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

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

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

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

上の 5 つの 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 回発火することになります。

【駆け出しの方へ】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

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

@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-durationをanimation-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は、アニメーションの方向を、指定します。

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

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

animation-fill-mode

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

※ 初期値は none

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

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

独学に限界を感じていませんか？