楽しいだけで十分です

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

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
yinm

WRITTEN BY yinm

I'm a software engineer.