[CSS] 키프레임(Keyframes) 애니메이션 심화

이번 포스팅에서는 [CSS 모션 심화] 파트의 세부 주제인 사용자 인터랙션 없는 자율 애니메이션에 대하여 상세히 알아보겠습니다.

1. 무한 궤도: 로딩 스피너 실전 제작

@keyframes를 이용하면 무한정 돌아가는 로딩 표시나, 좌우로 흔들리는 종소리 같은 애니메이션을 구현할 수 있습니다.

/* 1. 키프레임 정의: 시작점(0%)과 끝점(100%) 지정 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  width: 40px; height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  
  /* 2. 애니메이션 실행: 이름, 지속시간, 등속도(linear), 무한반복 */
  animation: spin 1s linear infinite;
}

2. 애니메이션이 끝난 후 상태 유지하기 (fill-mode)

요소가 화면 밖에서 날아와서 자리를 잡는 애니메이션을 만들면, 애니메이션이 끝나는 순간 원래 자리로 툭! 돌아가버립니다. 이를 방지하는 속성이 animation-fill-mode: forwards; 입니다.

@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.notification {
  animation: slideIn 0.5s ease-out forwards;
  /* forwards: 100%(to)에 선언된 상태를 애니메이션 종료 후에도 계속 유지함 */
}

---

지금까지 @keyframes의 기본 구조와 상태를 유지하는 forwards 속성에 대해 살펴보았습니다. 다채로운 마이크로 인터랙션을 설계해 사이트의 퀄리티를 한 단계 높여보세요.