이 글은 인프런의 "HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)" 강좌를 들으며 정리한 내용이다.

keyframes

The @keyframes rule specifies the animation code.

@keyframes loading {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

원형 크기 변경 로딩 애니메이션

.loading span {
  display: inline-block; //block 요소인 span을 크기가 변하게 바꿈
  width: 15px;
  height: 15px;
  background-color: gray;
  border-radius: 50%;
  animation: loading 1s linear infinite; //@keyframes 적용
}
.loading span:nth-child(1) {
  animation-delay: 0s;
  background-color: crimson;
}
.loading span:nth-child(2) {
  animation-delay: 0.2s;
  background-color: dodgerblue;
}
.loading span:nth-child(3) {
  animation-delay: 0.4s;
  background-color: royalblue;
}