CSS 애니메이션 키프레임 생성기

CSS 애니메이션은 JavaScript 없이도 인터랙티브한 인터페이스를 만들 수 있게 해줍니다. 키프레임 생성기로 부드럽고 성능 좋은 애니메이션을 만드세요.

CSS 애니메이션 기초

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

.element {
  animation: slidein 0.3s ease-out;
}

animation 속성

• animation-name: @keyframes 이름
• animation-duration: 재생 시간
• animation-timing-function: ease, linear, cubic-bezier 등
• animation-delay: 시작 지연
• animation-iteration-count: 반복 횟수 (infinite 가능)
• animation-fill-mode: 시작/끝 상태 유지

성능 최적화 애니메이션

transform과 opacity만 애니메이션하면 GPU 가속으로 부드럽게 동작합니다. width, height, margin 등은 리플로우를 유발하여 성능이 저하됩니다.

접근성 고려사항

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}