LoginSignup
7
3

More than 3 years have passed since last update.

株式会社CAMAdvent Calendar 2019Day 6
@tomomi_h(hatasa tomomi)

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

Last updated at Posted at 2019-12-05

はじめに

この記事は、 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の２つの機能がある。

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プロパティには以下の９つがある。

①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回で終わる。
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

１行にまとめられる。
例）

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のつまづいたところ」です。
お楽しみに！

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
3