CODEPREP | HTMLとCSS3でつくるクルクル回転するローディングのメモです。

背景を全画面にする

• positionプロパティにfixedを指定し、上下左右の相対位置を使って要素を全画面に広げる

selector {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

keyframeアニメーションをつくる 導入

• @keyframes アニメーション名 { 実際のkeyframe }
• keyframeとは、一連のアニメーションの中のとある通過点のこと
• keyframeを利用することで、アニメーションの中間地点を自由に制御し、アニメーションに変化をつけることができる (パラパラ漫画のようなもの)

keyframeアニメーションをつくる 設定

• パーセンテージでそのキーフレームが発生する時間を定義する (開始と終了のパーセンテージは、from, toで設定することも可能)
• keyframeアニメーションには、必ず0％(もしくはfrom)と100％(もしくはto)のタイミングを含める必要がある
• 回転は、transform: rotate()を使う

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

アニメーションさせる対象への指定方法

• アニメーション名を指定するにはanimation-nameを指定する
• 1周期が完了するまでの時間を指定するためにはanimation-durationを指定する

連続してアニメーションさせる

• アニメーションを何回実行するか指定するにはanimation-iteration-countを指定する

  • 値には、繰り返し実行する回数または、無限を意味するinfiniteを指定する

アニメーションの速度を変える

• どのようなアニメーションを実行するかを指定するためにはanimation-timing-functionを指定する

  • 初期値はease
  • 一定のスピードで実行するなら、linear