CSS 애니메이션 완전 정복 - animation으로 움직이는 웹 요소 만들기

 

 

이전 포스팅에서는
hover, focus 같은 사용자 행동에 따라 부드럽게 반응하는 transition을 알아봤습니다.

이번에는 자동으로 움직이는 애니메이션 효과,
즉 animation 속성만으로 구현하는 다양한 활용법을 다뤄보겠습니다.

---

 

✅ animation 기본 문법

animation: [이름] [지속시간] [타이밍함수] [지연시간] [반복횟수] [방향] [모드];

 

조금 길어 보이지만, 자주 쓰는 건 아래 정도예요:

.box {
  animation: moveBox 2s ease-in-out infinite alternate;
}
@keyframes moveBox {
  0%   { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

 

---

✅ animation과 keyframes의 관계

• animation은 이름만 붙이는 역할
• @keyframes가 진짜 애니메이션의 핵심

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

 

💡 애니메이션 이름은 원하는대로 지어도 무방하지만, 의미 있게 지으면 관리가 쉬워요!

---

 

✅ 주요 속성 정리

속성	설명
name	keyframes 이름
duration	한 사이클 걸리는 시간
timing-function	움직임 속도
delay	애니메이션 시작까지의 대기시간
iteration-count	반복 횟수 (infinite 가능)
direction	normal, reverse, alternate, alternate-reverse
fill-mode	시작 전/끝난 후 상태 유지 여부

 

---

 

✅ 예제: 글자 깜빡이기

.blink {
  animation: blinkText 1s step-start infinite;
}
@keyframes blinkText {
  50% {
    opacity: 0;
  }
}

 

---

 

✅ animation vs transition

구분	transition	animation
작동 조건	상태 변화가 필요 (hover 등)	자동 작동 가능
반복	안됨 (1회만 작동)	가능 (infinite)
복잡한 움직임	어려움	자유롭게 표현 가능

 

 

---

 

✅ 실무에서 유용한 사용처

• 로딩 스피너
• 슬라이더 자동 전환
• 배너 순환 광고
• 페이지 진입 효과 (fade-in 등)

💡 단, 너무 많은 animation은 퍼포먼스를 떨어뜨릴 수 있어요! 적절히 사용하는 것이 포인트입니다.