CSS 애니메이션 레퍼런스

웹 UI를 생동감 있게 만들어주는 가장 트렌디하고 실용적인 CSS Keyframe 애니메이션 모음입니다.
각 카드의 미리보기 박스를 클릭하여 애니메이션을 확인하고 코드를 바로 복사해 사용하세요.

CLICK TO PLAY

Fade In (페이드 인)

요소가 서서히 나타나는 가장 기본적인 등장 효과입니다.

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}

CLICK TO PLAY

Fade Up (아래에서 위로 페이드)

컨텐츠가 아래에서 부드럽게 올라오며 나타나는 효과입니다. 리스트 등장에 자주 쓰입니다.

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

CLICK TO PLAY

Pulse (맥박/강조)

크기가 커졌다가 작아지며 사용자의 시선을 이끄는 강조 효과입니다. 버튼에 유용합니다.

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.animate-pulse {
  animation: pulse 2s infinite ease-in-out;
}

CLICK TO PLAY

Bounce (바운스)

통통 튀는 효과로, 경고 메시지나 알림창 등장 시 생동감을 줍니다.

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}
.animate-bounce {
  animation: bounce 1.5s infinite;
}

CLICK TO PLAY

Shake (흔들림/오류)

비밀번호가 틀렸거나 입력값이 잘못되었을 때 사용자에게 오류를 직관적으로 알려줍니다.

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
}
.animate-shake {
  animation: shake 0.4s ease-in-out;
}

CLICK TO PLAY

Spin (회전/로딩)

로딩 스피너나 아이콘을 무한히 회전시킬 때 사용합니다.

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

CLICK TO PLAY

Slide In Right (오른쪽에서 슬라이드)

사이드바 메뉴나 토스트 알림이 우측에서 등장할 때 사용합니다.

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.animate-slide-in-right {
  animation: slideInRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

CLICK TO PLAY

Heartbeat (심장 박동)

Pulse보다 조금 더 역동적인 심박수 느낌의 강조 효과입니다. '좋아요' 버튼 등에 어울립니다.

@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}
.animate-heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

CLICK TO PLAY

Zoom In (줌 인)

화면 중앙에서 작았던 요소가 커지며 나타나는 효과입니다. 모달 창 등에 적합합니다.

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; }
}
.animate-zoom-in {
  animation: zoomIn 0.5s ease-out forwards;
}

CLICK TO PLAY

Float (플로팅)

요소가 공중에 둥둥 떠 있는 것처럼 위아래로 부드럽게 움직이는 효과입니다.

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.animate-float {
  animation: float 3s ease-in-out infinite;
}

CLICK TO PLAY

Swing (그네)

요소가 중심축을 기준으로 좌우로 흔들리는 경쾌한 효과입니다.

@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  to { transform: rotate(0deg); }
}
.animate-swing {
  animation: swing 1s ease-in-out;
  transform-origin: top center;
}

CLICK TO PLAY

Tada (짜잔)

축하 메시지나 성공 알림, 혹은 중요한 요소가 등장할 때 쓰기 좋은 극적인 효과입니다.

@keyframes tada {
  from { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
  to { transform: scale(1); }
}
.animate-tada {
  animation: tada 1s ease-in-out;
}

CLICK TO PLAY

Rubber Band (고무줄)

고무줄이 늘어났다가 줄어드는 것처럼 탄력 있는 효과입니다.

@keyframes rubberBand {
  from { transform: scale(1); }
  30% { transform: scale(1.25, 0.75); }
  40% { transform: scale(0.75, 1.25); }
  50% { transform: scale(1.15, 0.85); }
  65% { transform: scale(0.95, 1.05); }
  75% { transform: scale(1.05, 0.95); }
  to { transform: scale(1); }
}
.animate-rubber-band {
  animation: rubberBand 1s ease-in-out;
}

CLICK TO PLAY

Flip (플립/뒤집기)

Y축을 기준으로 3D처럼 회전하며 나타나는 세련된 카드 뒤집기 효과입니다.

@keyframes flipInY {
  from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
  40% { transform: perspective(400px) rotateY(-20deg); }
  60% { transform: perspective(400px) rotateY(10deg); opacity: 1; }
  80% { transform: perspective(400px) rotateY(-5deg); }
  to { transform: perspective(400px); opacity: 1; }
}
.animate-flip {
  animation: flipInY 1s ease-out forwards;
  backface-visibility: visible !important;
}