あなたのWEBサイトに動きを！CSSアニメーションの基礎！

Webサイトでは、ユーザーにメッセージを伝えるため、様々な工夫がされています。その中でもアニメーションは、メッセージを際立たせ、サイトのイメージを伝えるための重要な手法です。
アニメーションの実装方法はいくつかありますが、CSSを用いる方法は他の方法に比べて軽量な実装が可能になっています。
CSSアニメーションには主に「transition」と「animation」という二つの手法があります。
今回は、「:hover」を利用した「transition」での動きと、「@keyframes」を利用した「animation」での動きをご紹介します。

▼ CSS トランジションの実装ガイド
▼ CSS アニメーションの実装ガイド

CSS トランジションの実装ガイド

CSSトランジションは、要素のスタイル変更を滑らかなアニメーションに変化させる手法です。シンプルな記述で設定できるので、簡単にアニメーションを実装することができます。
CSSトランジションでは4つのサブプロパティを通じてアニメーションの細かな設定が可能です。

今回作成するコード

See the Pen css transition by 師岡崚汰 (@rxsocktt-the-scripter) on CodePen.

プロパティ一覧

transition-property: background-color;

transition-propertyでは、アニメーションを適応させるプロパティの名前を設定する時に使用します。
上記コードではbackground-colorの変化にアニメーションを加えるための設定をしています。

transition-duration: 2s

transition-durationでは、アニメーション全体の所要時間を設定します。
上記コードでは2秒に設定しています。

transition-timing-function: ease;

transition-timing-functionでは、アニメーションの速さを設定します。
設定したキーワードごとに、アニメーションの速さが変化します。

ease: 最初と最後がゆっくりに変化。初期値。
ease-in: 最初はゆっくりと動き、少しずつ早くなる。
ease-out: 最初が早く、後からゆっくり動く。
ease-in-out: 最初と最後ゆっくりに変化。easeよりも緩急が激しい。
linear: 最初から最後まで一定の速度で変化。

また、cubic-bezier()関数を使うことで細かく自由にアニメーションの速度を変更できます。

transition-timing-function: cubic-bezier(1,0,.02,.99);

transition-delay: 1s;

transition-delayでは、アニメーションが開始されるまでの時間を設定します。
上記コードでは1秒に設定しています。

transition: background-color 2s ease 1s;

また、これらのサブプロパティを一括指定する事もできます。

CSS アニメーションの実装ガイド

CSSアニメーションでは、設定した時間に応じて複数の動きを適用できます。@keyframesを設定することで、@keyframesで設定した動きを要素が再現します。
どのタイミングでどのように変化するかを細かく指定することが可能であり、多くのサブプロパティと@keyframesで細かい設定が可能なことから、CSSアニメーションはトランジションよりも自由度が高く、また、実装の難易度も高くなっています。

今回作成するコード

See the Pen Untitled by 師岡崚汰 (@rxsocktt-the-scripter) on CodePen.

プロパティ一覧

animation-name: anime;

animation-nameでは、設定する@keyframesの名前を指定します。
初期値は none で、必ず指定する必要があります。
上記コードで設定した名前はanimeです。

animation-iteration-count: infinite;

animation-iteration-countでは、アニメーションの実行回数を設定します。

1: 一回再生する。初期値。
0: 再生しない。
3: 三回再生する。自由に数字を設定可能。指定した数字回再生する。
infinite: 無限に再生する。

animation-timing-function: ease;

animation-timing-functionでは、アニメーションの速さを設定します。
設定したキーワードごとに、アニメーションの速さが変化します。

ease: 最初と最後がゆっくりに変化。初期値。
ease-in: 最初はゆっくりと動き、少しずつ早くなる。
ease-out: 最初が早く、後からゆっくり動く。
ease-in-out: 最初と最後ゆっくりに変化。easeよりも緩急が激しい。
linear: 最初から最後まで一定の速度で変化。
また、cubic-bezier()関数を使うことで自由にアニメーションの速度を変更できます。

animation-timing-function: cubic-bezier(1,0,.02,.99);

設定が便利になるジェネレーターもあります。https://cubic-bezier.com/#.17,.67,.83,.67

animation-duration: 2s;

animation-durationでは、アニメーション全体の所要時間を設定します。
上記コードでは2秒に設定しています。

animation-delay: 0.5s;

animation-delayでは、アニメーションが開始されるまでの時間を設定します。
初期値は0秒で上記コードでは0.5秒に設定しています。

animation-fill-mode: none

animation-fill-modeでは、アニメーションが開始される前と再生された後の要素の見た目を設定します。

none: 変化なし。初期値。
backwards: アニメーション再生前後を@keyframesで設定した0%の見た目の変更。
forwards: アニメーション再生前は変化なし。アニメーション再生後は@keyframesで設定した100%の見た目に変化。
both: アニメーション再生前は0%の状態に変化。アニメーション再生後は@keyframesで設定した100%の状態に変化。

animation-direction: alternate;

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

normal: 通常再生。初期値。
reverse: 逆再生。
alternate: 交互に再生。奇数回目の再生を通常再生、偶数回目の再生を逆再生。
alternate-reverse: 交互に再生。奇数回目の再生を逆再生、偶数回目の再生を通常再生。

animation: anime infinite ease 2s 0s none alternate;

また、これらのサブプロパティを一括指定する事もできます。

@keyframesとは

@keyframesは、CSSアニメーションの中で要素の変化を指定するためのプロパティです。アニメーションの「0%」は開始時点を、「100%」は終了時点を表し、これらの間に自由に%を指定することで、その地点の要素の状態を設定することができます。
@keyframeは多くの要素の変化に対応しており、width, height, color, opacity, transformなど、様々なプロパティの変化にアニメーションを付与できるので、コーダーの発想次第でどのようなアニメーションも実装することができます。
また、要素の変化について、一度に複数の設定が可能です。

@keyframes anime {
    0% {
        background-color: lightgreen;
        width: 0px;
    }
    50% {
        background-color: lightcoral;
    }
    100% {
        background-color: lightblue;
        width: 300px;
    }
}

上記のコードは、最初の幅を0px、最終的な幅を300pxにし、背景色を三段階に変化させたものです。