@keyframes

chat-gpt를 통한 인디케이터 작업 결과에 대한 궁금증.

 .loader {
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid gray;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
    margin: 20px auto;
}

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

@keyframes이 무엇일까?

@keyframes

• 애니메이션 시퀀스 동안 좀 더 세밀하게 중간단계를 제어.

◾ from/to

@keyframes slidein {
  from {
    transform: translateX(0%); // from - A starting offset of `0%`
  }

  to {
    transform: translateX(100%); // to - A starting offset of `100%`
  }
}

◾ percentage

@keyframes slidein {
  0% {
    transform: translateX(0%);
  }
  
  50% {
  	transform: translateX(50%);
  }

  100% {
    transform: translateX(100%);
  }
}

Reference

velog/ye-ji