CSS animationを使ってみよう！

css animationについて、あまり使う機会はありませんよね？
あったとしても、ローディングなどごく一部でしか使わないので、下記の参考サイトなどからコピーや微調整して使うことは多いのではないでしょうか？
codepen
　
今回は、css animation の基本的なところを改めて確認しようと思います。
まずはシンプルに円を作成します。
<div class="circle"></div>
.circle {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: #2196F3;
}
　　
その円をゆっくり移動しましょう。
まずはキーフレームの作成から始めます。
@keyframes example {
  0% {
    transform:translateX(0);
  }

  100% {
    transform:translateX(200);
  }
}
キーフレームを作成しただけではまだ動きません。
次ように円が表示されたと思います。

　
最後に.circleにanimationのプロパティを追加します。
.circle {  
  animation-name: example;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-play-state: running;
}

次のように円がアニメーションしたと思います。

　

各animationプロパティについて

animation-name

要素にキーフレームアニメーションを適用するアニメーション名を指定します。
（今回は「example」です。）

animation-duration

アニメーション一回分の時間の長さを指定します。

animation-duration: 1s;



animation-duration: 3s;

animation-timing-function

アニメーションの動きの加減速(イージング)を設定します。
キーワード「ease-out」やcubic-bezierなどで指定します。
animation-timing-function: ease-out;



animation-timing-function: steps(3, end);



animation-timing-function: cubic-bezier(0.86, 0, .07, 1);



easingsについては下記が参考になると思います。
https://easings.net/ja

animation-delay

アニメーションの開始を遅らせる時間を指定します。

animation-delay:0;
Start
animation-delay:1s;(1秒後開始されます)
Start

animation-iteration-count

停止するまでにアニメーション周期が再生される回数を指定します

animation-count:infinite; (無制限に繰り返されます)
Start
animation-iteration-count:3; (3回繰り返されます)
Start

animation-direction

アニメーション再生の方向をしていします。

animation-direction:normal;(周期ごとに初回に戻ります)
Start
animation-direction:reverse;(逆方向に開始され、周期ごとに初回に戻ります)
Start
animation-direction:alternate;(毎回反転させます。初回は順方向になります。)
Start
animation-direction:alternate-reverse;(毎回反転させます。初回は逆方向になります。)
Start

animation-fill-mode

実行の前後にどう対象にスタイルを適用するかを設定します。

none
適用されているcssの初期値

forwards
最後の適切なキーフレームで定義された値を対象に適用されると同時に適用

backwards
最初の適切なキーフレームで定義された値を対象に適用されると同時に適用

both
forwardsとbackwardsの両方適用

animation-play-state

アニメーションが実行中か停止中かを設定します。

running
アニメーションが現在実行中になります

paused
アニメーションが現在停止します。

以上がCSS animationの基本的な使い方です！
このように分けて考えるとわかりやすのではないでしょうか？

次回はさらに詳しい内容をお伝えできればと思います。

コメント