UnsplashのKalen Emsleyが撮影した写真

はじめに

CSSでは以下２種類のアニメーション用プロパティが用意されています。

・transitionプロパティ：手軽にシンプルなアニメーションを追加できる
・animationプロパティ：複雑なアニメーションを追加できる

今回はanimationプロパティのご紹介です。

animationの定義

animationプロパティで一括で設定する方法と、個別のプロパティで設定する方法があり、

animationプロパティで設定すると以下のようになります。

/* animetionプロパティでアニメーションの時間、開始タイミングなどを設定する */
.element { 
  animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state]; 
}


/* アニメーションの内容を定義する */
@keyframes [animation-name]{
  ～～任意のアニーメーションを定義する～～
}

　

以下はアニメーションの例です。

３秒間隔で「四角⇒円」の変化を無限に繰り返します。

<style>
.target{
  width: 100px;
  height: 100px;
  border: 3px solid black;
  animation: test 3s infinite;
}
@keyframes test{
  0%  { border-radius: 0%;  }
  50% { border-radius: 50%; }
  100%{ border-radius: 0%;  }
}
</style>

<div class="target"></div>

animationプロパティに設定する各値

animationプロパティに設定する各値は以下の通りです。

animation-name

アニメーションの名前を指定します。アニメーションは@keyframesで定義します。

例）animation-name: slide-in;

animation-duration

アニメーションの１サイクルにかかる時間を秒(s)もしくはミリ秒(ms)で指定します。

例）animation-duration: 2s;

animation-timing-function

アニメーションの進行速度を制御します。（始めはゆっくりでじょじょに早くなど）

例）animation-timing-function: ease;

　

以下のような値が用意されています。

値	内容
ease	始めと終わりはゆっくり
ease-in	始めはゆっくり、だんだん加速
ease-out	始めは早く、だんだん遅く
linear	一定の早さ

他にも段階的に変化させるstepsや自在に変化させるcubic-bezierなどがあるようです。

詳細が知りたい方は下のリンク先ページをご参照ください。

　https://developer.mozilla.org/ja/docs/Web/CSS/animation-timing-function#ease

animation-delay

アニメーション開始までの遅延時間を秒(s)もしくはミリ秒(ms)で指定します。

例）animation-delay: 1s;

animation-iteration-count

アニメーションの繰り返し回数を指定します。無限ループの場合はinfiniteを指定できます。

【３回繰り返す】
例）animation-iteration-count: 3;

【無限ループ】
例）animation-iteration-count: infinite;

animation-direction

アニメーションの進行方向を指定します。正方向、逆方向、交互に再生などの設定ができます。

例）animation-direction: alternate;

　

以下のような値が用意されています。

値	内容
normal	順方向に再生
reverse	逆方向に再生
alternate	順方向、逆方向交互に再生　※初回は順方向
alternate-reverse	順方向、逆方向交互に再生　※初回は逆方向

animation-directionは、この要素は順方向に再生、この要素は逆方向に再生するなど

同じanimation-nameのアニメーションを複数の要素に適用する際に活躍します。

animation-fill-mode

アニメーション開始前、終了後にアニメーションで使用するCSSを適用するかを設定します。

例）animation-fill-mode: forwards;

　

以下のような値が用意されています。

値	内容
none	animation中以外はアニメーションのスタイルを適用しない
forwards	animation終了時のスタイルをそのまま維持する。
backwards	animation開始前からanimation開始時のスタイルを適用する
both	forwards、backwords両方を適用する。

animation-play-state

アニメーションの再生状態を制御でき、

JavaScriptで動的に値を書き換えることで、アニメーションを一時停止したり、停止した位置から再生したりできます。

例）animation-play-state: paused;

以下の２つの値を使います。

値	内容
paused	一時停止
running	再生

animation-timeline　※対応ブラウザに注意

アニメーションを、時間ではなく、画面のスクロールに合わせて進行させることができます。

animation-timelineに設定できる値はview()、scroll()、@scroll-timelineの３つの値で設定できるようですが、今回は最もわかりやすく、使い勝手の良かったview()を使った例のご紹介です。

（恐らくview()だけでこの先も乗り越えていけるのではないかと、他のやり方は調べていません！）

　

view()を使った場合、セットでanimation-rangeプロパティを使い、以下のように２行書くことになります。

例）animation-timeline: view();
　　animation-range: entry 0% entry 100%;

　

animation-rangeでアニメーションの進捗を調整します。

entry、cover、containなどのアニメーションの起点終点の範囲を設定する値と、0%、100％などのオフセット量の値で指定します。

※オフセット量はpxでも指定できます。

　

0%、100%で指定した場合、アニメーションの起点と終点は以下のようになります。

値	起点	終点
entry	要素が画面に映り始めた時	要素全体が画面に入った時
cover	要素が画面に映り始めた時	要素が完全に画面外に出た時
contain	要素全体が画面に入った時	要素の一部が画面外に出た時

※注意：animation-timelineは新しいCSSプロパティのため、Chromeバージョン115、Edgeバージョン115以上でしか動作しません。動作するブラウザの種類、バージョンについては以下をご確認ください。

https://developer.mozilla.org/ja/docs/Web/CSS/animation-timeline#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7

　

animetionプロパティについては以上です！