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

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

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

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

👇 メンターやってます 👇

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

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています！

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

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

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

👆 メンターやってます 👆

この記事の目次

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プロパティは、数も少ないので、ショートハンドを使って指定しています。

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 関連のプロパティ紹介の前に、キーフレームについて触れておきます。

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

値	動き
normal	0%→100％の方向でアニメーション繰り返す場合はまた 0%→100％に戻
reverse	100%→0％の方向でアニメーション繰り返す場合はまた 100%→0％に戻る
alternate	0%→100％の方向でアニメーション繰り返す場合は折り返す
alternate-reverse	100%→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では、様々なイージングを紹介しています。迷ったら、このサイトで紹介しているものを使ってみても良いかもしれません。

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

参考記事

アニメーションをデザインしよう！知っておきたいCSSイージングのお手本

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

@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)のような指定ができます。

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

参考記事