[miniProjects] 23_Kinetic CSS Loader

23_Kinetic CSS Loader

💻 주제 : 두 개의 삼각형이 돌아가는 로딩화면

• keyframe을 사용해 정한 너비안에서 삼각형이 돌아가도록 함.
  
  https://www.w3schools.com/cssref/css3_pr_animation-keyframes.php

@keyframes rotateA {

  0%,
  25% {
    transform: rotate(0deg);
  }

  50%,
  75% {
    transform: rotate(180deg);
  }

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

@keyframes rotateB {

  0%,
  25% {
    transform: rotate(90deg);
  }

  50%,
  75% {
    transform: rotate(270deg);
  }

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

👍🏻rotateA, B 애니메이션은 0%부터 100%까지의 시간 동안 회전 변환을 적용한다.
[rotateA]

• 0%와 25% 사이: 0도 회전
• 50%와 75% 사이: 180도 회전
• 100%: 360도 회전

[rotateB]

• 0%와 25% 사이: 90도 회전
• 50%와 75% 사이: 270도 회전
• 100%: 450도 회전