Zenn
Open4

CSS 完全に理解したい

CSS
かしかし

おしゃれなデザインを CSS で再現してみる。
JavaScript は使わないようにする。

自分の CSS の幅が広がると嬉しい

かしかし

一番シンプルな丸がぐるぐるするやつを作る

border-radius: 50%; で円を作って、 border-top-color: transparent; で1/4だけ塗ってない円が作れる。

spin という keyframes を作って、指定した周期で回転させる。

<div class="loading">
  <div class="three-quater-spinner"></div>
</div>

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to{
    transform: rotate(360deg);
  }
}

.loading {
  height: 64px;
  width: 64px;
}

.three-quater-spinner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid red;
  border-top-color: transparent;
  box-sizing: border-box;
  animation: spin 1s linear 0s infinite;
}

ちょっとアレンジしてみたやつ。
1/4 を濃くしてそれ以外は薄い色、アニメーションも linear ではなくゆっくり止まる感じにした。

.quater-spinner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid pink;
  border-top-color: red;
  box-sizing: border-box;
  animation: spin 1s ease-out 0s infinite;
}

円にグラデーションがあるバージョンはちょっと工夫がいるらしい。
まずグラデーションがある中も着色した円を作り、その上から背景色と同じ色の円を配置して中心を切り抜いたように見せる。

<div class="loading">
  <div class="gradation-spinner">
    <div></div>
  </div>
</div>

.gradation-spinner {
  width: 100%;
  padding: 2px;
  background: linear-gradient(0deg, rgba(30,144,255,0.7) 33%, rgba(30,144,255,0.1) 100%);
  border-radius: 50%;
  animation: spin 1s linear 0s infinite;
}

.gradation-spinner div {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: var(--main-bg-color);
}
かしかし

横並びになってるやつが順番に動くローディングを作りたい

まず点を横並びにする

<div class="loading">
  <div class="dots">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

.dots {
  display: flex;
  width: 48px;
  align-item: center;
  justify-content: space-between;
}

.dots div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: blue;
}

順番に点滅するやつを作る。
from を点灯した状態、 to を消灯した状態とした keyframes を作っておく。
alternate で折り返して実行するようにし、 ease で最初と最後（点灯するタイミング）を滑らかに表示させる。

@keyframes pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.3;
    transform: scale(0.5);
  }
}

.pulse1 {
  animation: pulse 0.6s ease 0s infinite alternate;
}

ジャンプさせるケースも作った。
着地してる時間を長くとりたいので、 keyframes を割合で指定し、全体の30%の時間だけジャンプしているようにした。
アニメーション全体が 0.5s なのに対して、 duration は 0.1s で調整した。

@keyframes jump {
  0% { transform: translate(0, 0px); }
  70% { transform: translate(0, 0px); }
  100% { transform: translate(0, -10px); }
}

.jump1 {
  animation: jump 0.5s linear 0s infinite alternate;
}
.jump2 {
  animation: jump 0.5s linear 0.1s infinite alternate;
}
.jump3 {
  animation: jump 0.5s linear 0.2s infinite alternate;
}

参考にした

https://ics.media/entry/18730/