CSSアニメーションの基本!Animationを使ってみよう

2018年10月16日

cssでアニメーションの基礎である「Animation」の使い方を詳しくご紹介します。
transitionについては前回お話ししたので、次はanimationを学んでいきましょう。

CSS Animation

animationとは、キーフレームというのを使ってアニメーションの細かい動きを決めることができるプロパティです。まずは下のサンプルを見てください。

サンプル1

赤色、黄色、黄緑色、水色、紫色の順に変化しながら、高さが伸び縮みしていると思います。CSSを確認すると、@keyframesと書いてあります。これがanimationの細かい動きを決めるためのプロパティで、アニメーションの最初が0%、最後が100%としてその間を好きな%で区切ってその時の状態を指定することで、あらゆる動きをつけることができます。
また、animation-name: anime1;animation-duration: 4s;というのがanimationのプロパティです。
animationには6つのプロパティがあります。

animation-name:@keyframeで指定したアニメーションの名前
animation-duration:アニメーションにかける時間
animation-timing-function:アニメーションのタイミング・割合を指定
animation-iteration-count:アニメーションの繰り返し回数を指定
animation-direction:アニメーションの再生方向を指定
animation-delay:アニメーションの開始時間を指定

それぞれのプロパティについて、詳しくみて行きましょう。

animation-name

要素にキーフレームで指定したアニメーションを適応させるために、アニメーションの名前を指定するプロパティです。noneや存在しない名前を指定した場合、アニメーションは起こりません。
デフォルト値:none

animation-duration

要素のアニメーションにかける時間を指定するプロパティで、単位はs(秒)またはms(ミリ秒)で指定します。
デフォルト値:0s
使い方はこんな感じ。

animation-timing-function

アニメーションのタイミング・進行割合を指定するためのプロパティで、主に以下の6種類あります。

ease:始まりと終わりを滑らかにする
linear:一定に変化させる
ease-in:ゆっくりと始める
ease-out:ゆっくりと終わる
ease-in-out:ゆっくりと初めてゆっくりと終わる
cubic-bezier(値, 値, 値, 値):独自に設定

ほとんどtransitionと同じです。
デフォルト値:ease

animation-iteration-count

アニメーションの繰り返し回数を指定するプロパティで、好きな回数を指定することもできるし、永遠にループさせるinfiniteを指定こともできます。ここがtransitionとの大きな違いです。
デフォルト値:1

animation-direction

アニメーションがずっと同じ方向に再生されるのか、交互に反転再生させるのかを決めるプロパティです。

normal:普通方向の再生でアニメーションサイクルを繰り返す(初期値)
alternate:奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す

alternateを指定して逆方向の再生のとき、animation-timing-functionで指定したタイミング・進行割合も反転します。例えば、ease-in(ゆっくりと始める)を指定した場合、逆方向ではease-out(ゆっくり終わる)になります。
最初に見たサンプル1のanimation-directionalternateにして見ましょう。

サンプル2

サンプル1では「赤 → 黄色 → 黄緑 → 青 → 紫」の後、パッと赤に変わりまた同じアニメーションを繰り返していました。ですがサンプル2では「赤 → 黄色 → 黄緑 → 青 → 紫」の後、「紫 → 青 → 黄緑 → 黄色 → 赤」と逆再生されています。この時、タイミングも逆再生のease-out(ゆっくり終わる)になっていることが確認できます。

animation-delay

アニメーションが何秒後に始まるのかを指定するプロパティで、単位はs(秒)またはms(ミリ秒)で指定します。
animation-delay: 0s;にすればすぐに始まるし、animation-delay: 1s;にすれば1秒後に始まります。
デフォルト値:0s

animationの活用方法

ここまでが、animationの基本的な説明です。animationはループが可能なので、ホバーしたりクリックしたりという引き金がなくても動いていてほしい場所に使えます。
いくつかサンプルを用意したので、コピペしてそのまま使ってもいいですし、少しアレンジして使ってもいいですね。

ふわふわさせる

風船のような、雲のようなふわふわした動きをつけたいときに使えます。

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -20px); // -20pxを変えることで上下の動く幅を変えられる
  }
  100% {
    transform: translate(0, 0);
  }
}

ブルブルさせる

ブルブルと震えているような動きをつけたいときに使えます。

@keyframes buruburu { //translateの中の値を変えることでブルブルの大きさを変えられる
  0% {
    transform: translate(-3px, 0) rotate(-5deg);
  }
  50% {
    transform: translate(0, -2px) rotate(0deg);
  }
  100% {
    transform: translate(-3px, 0) rotate(5deg);
  }
}

ゆらゆらさせる

振り子のように左右にゆらゆらさせたいときに使えます。

@keyframes swing { // 25%と75%のrotateの値を変えることで、振り幅を変えられる
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

ぴょんぴょんさせる

うさぎがぴょんぴょん跳ねるような動きをつけたいときに使えます。

@keyframes pyonpyon { // 20%と30%のtranslateの値を変えることで跳ねる高さを変えられる
  0% {
    transform: translate(0, 0);
  }
  5% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, -15px);
  }
  25% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(0, -15px);
  }
  50% {
    transform: translate(0, 0);
    }
  100% {
    transform: translate(0, 0);
  }
}

以上、Animationの使い方でした。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です