CSS Keyframes 생성기

네 가지 프리셋

페이드 슬라이드

.animated {
  animation: fade-slide 0.6s ease both;
}

@keyframes fade-slide {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

요소가 아래에서 위로 미끄러지며 나타납니다.

펄스

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: .8; }
}

부드러운 호흡 효과로, 알림 점과 배지에 좋습니다.

스핀

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

한 바퀴 회전. 로더와 아이콘에 유용합니다.

바운스

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-24px); }
}

요소가 위로 튀었다가 돌아옵니다.

왜 transform과 opacity인가

브라우저는 transform과 opacity를 레이아웃 계산이나 다시 그리기 없이 GPU에서 합성하므로 애니메이션이 부드럽게 유지됩니다. 프리셋은 레이아웃 계산을 일으키는 속성을 의도적으로 피합니다.

animation 축약형

animation: fade-slide 0.6s ease both;는 fade-slide라는 애니메이션, 0.6초 길이, 기본 ease 이징을 뜻합니다. 채우기 모드 both는 애니메이션이 시작되기 전에 시작 상태를 적용하고 끝난 뒤에도 종료 상태를 유지하므로, 요소가 시작 전에 번쩍이거나 움직임 후에 갑자기 되돌아가지 않습니다.

이름 짓기 규칙

• CSS 규칙에 맞게 kebab-case를 사용하세요.
• 요소가 아닌 움직임을 나타내는 이름을 쓰세요. alert-appear보다 fade-in-up이 낫습니다.
• 서드파티 라이브러리와 충돌할 수 있는 이름은 피하세요.

브라우저 지원

@keyframes는 보편적이며 IE 10 이후 모든 브라우저에서 지원됩니다.