【CSS】animationの書き方と設定方法をわかりやすく解説

現在のWebサイトやWebアプリケーションは、動きを付けることが当たり前になりました。少し前だと、JavaScriptを使って動きを付けるのが一般的でしたが、今はCSSで動きをを実装することが可能になり、簡単なアニメーションであればCSSで記載することが多いです。

今回の記事では、CSSのanimationプロパティの使い方を初心者にもわかりやすく解説します。一度記載方法を理解することができれば、様々な表現を実装することができます。

CSSのanimationプロパティを理解して、動きのあるWebサイトを制作できるようになりましょう。

記事の後半では、簡単な実装例も紹介しますので最後までご覧ください。

CSSのanimationは動きを細かく設定できる

WebサイトやWebアプリケーションに動きをつけるためには、JavaScriptを記載するかCSSのanimationプロパティかtransitionプロパティを使用することになります。

JavaScriptでプログラミングをしなくてもanimationプロパティで細かいアニメーションの設定が可能です。簡単なスライドであったり、ボタンが動いたりとanimationプロパティで実現できるアニメーションは多岐にわたります。

CSSでアニメーションを実装する方法としては、animationプロパティとtransitionプロパティがあります。

以下で、animationとtransitionの違いを簡単に解説します。

CSSのanimationとtransitionの違い

animationプロパティとtransitionプロパティの違いは、簡単に言ってしまえば複雑な動きを表現できるかどうかです。

animationプロパティは、

transitionプロパティは、

CSSでアニメーションを実装するのであれば、animationプロパティは必須です。簡単なアニメーションの設定であればtransitionプロパティで良いかもしれませんが、複雑な動きを付けたいのであればanimationプロパティをマスターしましょう。

CSSのanimationの設定方法と書き方を解説

ここからは、animationプロパティの書き方と詳細について解説していきます。

一概にanimationプロパティと言っても、設定する項目はたくさんあります。

一つ一つのanimationプロパティの詳細を知ることで色々なアニメーションを実装できます。アニメーションの開始時間や繰り返す回数、持続時間など設定しなければならない項目は多いのです。

ここからは、animationプロパティの詳細設定を一つずつ紐解いていきます。

animationプロパティの詳細を見てみよう

animationプロパティには、指定できるプロパティがたくさんあります。一つずつ覚えるのは大変ですが、このanimationプロパティを習得できればWebサイトやWebアプリケーション制作がさらに楽しくなること間違いないです。

自分が思ったとおりにアニメーションを再現できた時は感動しますよ。

animationプロパティを以下の表にまとめました。

animation-name	アニメーションに名前を付けます。
animation-duration	1回のアニメーションの時間を設定します。
animation-delay	アニメーションを開始するまでの時間を設定します。
animation-iteration-count	アニメーションを繰り返させる回数を指定します。
animation-direction	アニメーションを繰り返す際の最初の状態を指定します。
animation-fill-mode	アニメーションが終了した後の状態を指定できます。
animation-play-state	アニメーションを途中で止めるかどうかを指定できます。
animation-timing-function	アニメーションの実行速度を設定できます。

animation-name

CSSでアニメーションを表現する際にはそのアニメーションに名前を付ける必要があります。後半で解説しますが、@keyframeでアニメーションの状態を指定するときに、アニメーションの名前の指定が必要になるからです。

animation-nameの記載方法は、

CSS
.example{
animation-name: slideshow;
}

animation-nameの値は、英数字、ダッシュ(-)、アンダースコア( _ )を使用可能です。アニメーションの動きをイメージしやすい名前にすると修正もしやすいのでおすすめです。

animation-duration

durationとは英語で「間隔」を意味します。animation-durationは1回のアニメーションが終了するまでの時間を指定します。

記載方法は、

CSS
.example{
animation-duration:2s;
}

2sのsは秒(second)を表します。他にはms(ミリ秒)も指定できます。sかmsを指定する必要があります。

初期値は0sとなりアニメーションは起こりません。

animation-delay

アニメーションが始まるまでの時間を指定するのが、animation-delayです。画面にアニメーションをする要素が入ってきてからの開始時間を指定します。

記載方法は、

CSS
.example{
animation-delay:1s;
}

animation-durationと同様に、単位は秒(s)もしくはミリ秒(ms)を指定します。

animation-iteration-count

iterationとは英語で「反復」という意味があります。animation-iteration-countは、アニメーションを繰り返させる回数を指定します。

記載方法は、

CSS
.example{
animation-iteration-count:2;
}

アニメーションを繰り返させる回数を指定することができます。数字だけでなく、永遠に繰り返す意味でもある「infinite」もあります。infiniteはよく使うので覚えておきましょう。

animation-direction

アニメーションを繰り返す時に、どこから始めるかを指定するのがanimation-directionです。

animation-directionの値は、

normal	初期値。繰り返す際に最初に戻り開始します。
reverse	繰り返す際に最後の状態から始まります。
alternate	アニメーションを繰り返すときに、normalとreverseの状態を繰り返します。
alternate-reverse	reverseとnormalの状態を繰り返します。先にreverseから始まります。

animation-fill-mode

アニメーションが終了した時点での状態を指定することができます。

animation-fill-modeの値は、

none	初期値。アニメーションが開始する前の状態に戻ります。
backwards	keyframesで指定した0％の状態になります。
forwards	keyframesで指定した100％の状態になります。
both	開始時はkeyframesの0％、終了時はkeyframesの100％の状態になります。

アニメーションが終わった後にどのような状態を保持したいかで値が変わります。

animation-play-state

animation-play-stateは、ホバーなどのアクションとともに使われるプロパティです。

animation-play-stateの値としては、

running	初期値。アニメーションは継続されます
paused	何らかのアクションによりアニメーションを停止することができます。

例えば、アニメーションしている要素にカーソルを当てたときにアニメーションが一時停止するなどの設定が可能です。

記述例

CSS
.example{
  width: 100px;
  height: 100px;
  margin-left: 200px;
  border: 1px solid black;
  animation-name: slideshow;
  animation-delay: 1s;
  animation-duration: 4s;
  /* animation-direction: reverse; */
  animation-iteration-count: infinite;
}
.example:hover{
  animation-play-state: paused;
}

上記のコードでは、アニメーションしているexampleクラスにマウスをホバーさせると

アニメーションを途中で停止することができます。

animation-timing-function

アニメーションの変化速度を設定できます。

animation-timing-functionで指定できる値としては、

ease	最初と最後がゆっくり変化します
ease-in	開始が遅く、少しずつ早く変化します
ease-out	開始が早く、少しずつ遅く変化します
ease-in-out	最初と最後がゆっくり変化します。easeよりもさらにゆっくり変化します。
linear	最初から最後まで同じ速度です
step-start	開始したと同時に最後の状態になります
step-end	終了時点まで動かず、終了間近で最後の状態になります。

初期値はeaseになります。

それぞれの動きを把握して、再現したいアニメーションに合った値を選びましょう。

animationのショートハンド

animationプロパティはショートハンドで書くのが一般的です。コードの記述量も少なく済みます。

animationのショートハンドの記載方法は、

CSS
animation:(animation-name)(animation-duration)(animation-delay)(animation-iteration-count);

記載例として、

CSS
.example{
  animation: slideshow 1s 4s infinite;
}

全てのanimationプロパティをショートハンドに組み込むことは可能ですが、全部を記載することはほぼありません。特別に指定が必要でなければ省略します。

注意点としては、animation-durationとanimation-delayの順番です。この2つのプロパティは秒数を指定するので、animation-durationを先に書く、animation-delayを後に書くと覚えておきましょう。

@keyframesを設定して、細かいアニメーションを再現

animationプロパティでアニメーションを再現するためには@keyframesを設定する必要があります。

keyframesは、アニメーションの最初の状態から途中の状態、最後の状態を指定してアニメーションの流れを記載します。

記載方法は、

CSS
@keyframes animation-name{
0%{
最初の状態
}
50%{
途中の状態
}
100%{
最後の状態
}
}

アニメーションの流れを%で表すことが多いのですが、他の記載方法もあります。

例えば、

CSS
@keyframes animation-name{
from{
最初の状態
}
to{
最後の状態
}
}

fromが0%、toが100％の意味があります。

しかし、%で表すほうが細かいアニメーションの設定が可能ですので、%で指定することが圧倒的に多いです。

animationプロパティと@keyframesはセットで指定されていないとアニメーションは動かないので書き忘れが無いように注意しましょう。

実際のanimationプロパティを見て振り返る

ここでは、簡単なanimation設定の例を紹介します。

HTML
<div class="example"></div>

CSS
.example{
  width: 100px;
  height: 100px;
  margin-left: 200px;
  border: 1px solid black;
  animation: slideshow 1s 4s infinite;
  /*animation-name: slideshow;
  animation-delay: 1s;
  animation-duration: 4s;
  animation-iteration-count: infinite;*/
}

.example:hover{
  animation-play-state: paused;
}

@keyframes slideshow {
  0%{
    transform: translateX(0);
  }
  50%{
   transform: translateX(100px);
  }
  100%{
    transform: translateX(0px);
    background-color: cadetblue;
  }
}

上記のコードをコピーして、それぞれの値を変更して動きを確認してみましょう。色んな表現ができて面白いですよ。

CSSのanimationプロパティの解説：まとめ

今回の記事ではanimationプロパティについて解説しました。

現在のWebサイトやWebアプリケーションはアニメーションがほぼ必須ですので、習得しておきましょう。

animationプロパティを習得することで、表現できる幅が大きく広がります。

まずは、実際にコードを記載し、体験してみましょう。覚えるのではなく、手を動かすことをおすすめします。