Help us understand the problem. What is going on with this article?

CSSアニメーションで雪だるまとツリーを作ろう⛄🎄

More than 1 year has passed since last update.

はじめに

この記事は、 CAMエンジニア Advent Calendar 2019 6日目の記事です。

記事一覧はこちらから↓
https://qiita.com/advent-calendar/2019/cam-inc

昨日はid:youkouJB さんの 「入社してCSS記述で指摘されたこと」 でした。
CSSの記述方法について気になる方は是非読んでみてください!とてもためになりました!!

ここからはid:tomomi_hがCSSアニメーションについて書いていきたいと思います。

アニメーションてなに?

そもそもcssアニメーションにはCSS TransitionとCSS Animationの2つの機能がある。

CSS Transition

アニメーションが始まって終わるまでの時間を設定するプロパティ。

CSS Animation

キーフレームアニメーションのプロパティとその変化を指定して、アニメーションの名前を設定します。
0〜100%までの値で、時間経過を元に変化する。
@Keyframeとanimationはセットで使うプロパティ。

今回は、CSS Animationを使って簡単なアニメーションを試してみます〜。

作るもの

12月といえばクリスマス:santa_tone1:
今回はクリスマスにちなんで「雪だるま」と「ツリー」を作ってCSS Animationを学びます。

keyframesとanimationのプロパティについて

keyframesの使い方

@keyframes の後の名前は任意で決める。
アニメーションの開始と終了を0%(/from) から100%(/to)で指定する。

@keyframes 自分で決めた名前 {
   0% {
     CSSプロパティ:;
   }
   50% {
     CSSプロパティ:;
   }
   100% {
     CSSプロパティ:;
   }
}

たとえば、回転させたかったら

@keyframes rotation {
  0% {
    background: red;
  }
  100% {
    transform: rotate(90deg);
    background: blue;
  }
}

これに、例えば

animation: rotation 1s ease-out infinite;

を加えると、
09c16c5fdf29c1be1ab6ab94fb0f461d.gif
このように、0%の時は色がredのまま、100%のときに90°回転して色が青になる。

animationプロパティについて

animationプロパティには以下の9つがある。

①animation-name アニメーションを適用する要素を指定する
②animation-duration アニメーションが完了するまでの時間を指定する
③animation-timing-function アニメーションの進行度を指定する
④animation-delay アニメーションが開始するまでの時間を指定する
⑤animation-iteration-count アニメーションの実行回数を指定する
⑥animation-direction アニメーションの再生方向を指定する
⑦animation-fill-mode アニメーションの再生中・再生後のスタイルを指定する
⑧animation-play-state アニメーションの再生、または一時停止を指定する
⑨animation 上記8つのプロパティを1つでかけるショートハンドプロパティ

animation-name

animation-nameには@keyframesの名前を書く。

@keyframes rotation {
  0% {
    background: red;
  }
  100% {
    transform: rotate(90deg);
    background: blue;
  }
}

.クラス名 {
 animation-name: rotation;
}

animation-duration

animation-durationは、アニメーションの開始から終了までの時間を指定できる。

@keyframes rotation {
  0% {
    background: red;
  }
  100% {
    transform: rotate(90deg);
    background: blue;
  }
}

.クラス名 {
 animation-name: rotation;
 animation-duration: 5s;
}

これなら90度回転するのに5秒かかる。
b675ea27e199b56fd88c428f48d47aa0.gif

animation-timing-function

アニメーションが変化する速度を指定できる。

① ease 初期値。開始時と終了時は緩やかに変化する。
② ease-in 開始時は緩やかに変化、終了に近づくと早く変化する。
③ ease-out 開始時は早く変化し、終了時は緩やかに変化する。
④ ease-in-out 開始時と終了時は、かなり緩やかに変化する。
⑤ linear 開始から終了まで一定に変化する。
⑥ step-start 開始時に最終の状態になる。
⑦ step-end  終了時に最終の状態になる。
⑧ steps(正数, start または end)
  指定した正数の段階で変化する。第2引数には start または end を指定。
  startを指定すると、アニメーション開始時から変化。endを指定すると、アニメーション終了時に変化。

違いがよくわからないから、サンタさんとトナカイを走らせて比べてみた。
e9cdd679488e495b36634cd7ae0b7444.gif

なるほど〜〜!

animation-delay

アニメーションが始まるまでの時間を指定できる。

@keyframes rotation {
  0% {
    background: red;
  }
  100% {
    transform: rotate(90deg);
    background: blue;
  }
}

.クラス名 {
 animation-name: rotation;
 animation-delay: 3s;
}

3秒経ってから始まる。
2194f59a1c4047829c9d20ce2252b14b (1).gif

animation-iteration-count

アニメーションの繰り返しの回数を指定できる。

@keyframes rotation {
  0% {
    background: red;
  }
  100% {
    transform: rotate(90deg);
    background: blue;
  }
}

.クラス名 {
 animation-name: rotation;
 animation-delay: 2s;
 animation-iteration-count: 2;
}

2秒経ってから始まって、2回で終わる。
cb92faf664f339fcec283ce4b3afe593.gif

animation-direction

アニメーションの方向を指定できる。
①nomal アニメーションを毎回順方向に再生。
②reverse アニメーションを毎回逆方向に再生。
③alternate アニメーションを毎回反転させる。初回が順方向。
④alternate-reverse アニメーションを毎回反転させる。初回が逆方向。

またまた、サンタさんとトナカイを走らせて比べてみた。

.santa {
  animation-name: santa;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-direction: ここにanimation-direction;
}

@keyframes santa {
  0% { left: 500px; }

  100% { left: 0; }
}

a750ef5fd0839d1ffa21dbe04667ee46.gif

animation-fill-mode

アニメーション再生中、再生後のstyleを指定できる。
①none
スタイルを指定しない。アニメーション終了後はもとのスタイルが適用される。
animation-delayを指定している場合は、アニメーションが開始するまでは、もとのスタイルが適用される。
②backwards
アニメーション終了後は0%のスタイルが適用される。
animation-delayを指定している場合は、アニメーションが開始するまでは、0%のスタイルが適用される。
③forwards
アニメーション終了後は100%のスタイルが適用される。
animation-delayを指定している場合は、アニメーションが開始するまでは、もとののスタイルが適用される。
④both
アニメーション終了後は100%のスタイルが適用される。
animation-delayを指定している場合は、アニメーションが開始するまでは、0%のスタイルが適用される。

.squear {
  background-color: red;
  animation-name: rotation;
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-fill-mode:   ;
}

@keyframes rotation {
  0% {
    background: blue;
  }
  50% {
    transform: rotate(90deg);
    background: yellow;
  }

  100% {
    transform: rotate(90deg);
    background: green;
  }
}

5b7db6e943b906135929aee66c3a2f35.gif

animation-play-state

アニメーションが実行中か停止中かを指定できる。
①running アニメーションを再生させる。
②paused アニメーションを停止させる。

.text {
  animation-name: color;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-play-state: running;
}

@keyframes color {
  0% {
    color: red;
  }
  100% {
    color: green;
  }
}

ed00a73a7d0e30431beea5a652114129 (1).gif
初期値runningで、ボタンを押したら止まる→動く→止まる

animation

1行にまとめられる。
例)

transition :  3s linear 0 infinite alternate;

この機能を使って、雪だるまとツリーを動かしてみる⛄🎄

雪だるまをゆらゆらさせる⛄

.snowman {
  animation: swing 1s 1s ease-in-out infinite alternate;
}
@keyframes swing {
  0%,100% { 
    transform-origin: bottom center; 
  }
  50% {
    transform: rotate(-2deg);
  }
}

原点をbottom centerにして,1秒かけてswingさせる。

7cbd22a269c4f27cb265a03e300aaf66.gif

クリスマスツリーをキラキラさせる🎄✨

.reflect {
  animation: reflect 2s linear infinite;
}

@keyframes reflect {
  0% { opacity: 0.2; }
  50% { opacity: 0.8; }
  80% { opacity: 0.2; }
}

ひとつひとつに色を付けて、2秒間のopacityを指定する。
20c41cab06f3928ab49ce67306e10fb6.gif

雪だるま⛄とクリスマスツリー🎄を使って、冬景色ぽくしてみた:snowflake:

🎁 Merry Christmas 🎁

See the Pen ExaYbQE by ともみ (@tomomi0425) on CodePen.

さて、明日はid:rumanさんの「JSのつまづいたところ」です。
お楽しみに!

tomomi_h
こんにちは
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away