【CSS3】ローダーアニメーション

udemyの動画内容のメモ・備忘録

index.html

<div class="three-dot-spinner">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
</div>

style.scss

$cBlack: black;

.three-dot-spinner {
  text-align: center;

  & div {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: $cBlack;
    border-radius: 50%;
    animation: sk-bouncedelay 1.4s infinite;
  }

  & .bounce1 {
    animation-delay: -0.32s;
  }
  & .bounce2 {
    animation-delay: -0.16s;
  }
}

@keyframes sk-bouncedelay {
  0% {
    // opacity: 0;
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
  80% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}