CSS 도구/CSS 애니메이션 빌더
CSS 애니메이션 빌더
인터랙티브 타임라인 에디터로 멋진 CSS 키프레임 애니메이션 생성
미리보기
Box
설정
1s
0s
프리셋
타임라인
키프레임 위치 0%
키프레임 위치 50%
키프레임 위치 100%
CSS 코드
Loading...CSS 애니메이션 가이드
매력적인 CSS 애니메이션을 만드는 방법을 알아보세요
CSS 애니메이션이란?
CSS 애니메이션은 CSS 스타일 간의 전환을 애니메이션화할 수 있게 해줍니다. 트랜지션과 달리 여러 키프레임을 정의하여 애니메이션 시퀀스를 완벽하게 제어할 수 있습니다. 애니메이션은 자동으로 실행되고, 무한 반복되며, JavaScript로 제어할 수 있습니다.
사용 방법
- 지속 시간, 타이밍, 반복 횟수 등 애니메이션 설정 구성
- 키프레임을 추가하여 각 시점의 애니메이션 상태 정의
- 각 키프레임에서 투명도, 크기, 회전 등의 속성 조정
- 애니메이션 미리보기 후 생성된 CSS 코드 복사
전문가 팁
- 부드러운 왕복 애니메이션을 위해 'alternate' 방향 사용
- 복잡한 효과를 위해 transforms (scale, rotate, translate) 조합
- 애니메이션 종료 후 최종 상태 유지를 위해 'forwards' fill mode 사용
브라우저 지원
CSS 애니메이션은 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저에서 완벽하게 지원됩니다. @keyframes 규칙과 애니메이션 속성은 뛰어난 크로스 브라우저 호환성을 가지고 있습니다.
자주 묻는 질문
CSS 애니메이션과 트랜지션의 차이점은 무엇인가요?
트랜지션은 두 상태 사이의 변화를 애니메이션화하며 hover 같은 트리거가 필요합니다. 애니메이션은 @keyframes로 여러 단계를 정의할 수 있고, 자동 시작, 무한 반복, 더 복잡한 움직임이 가능합니다. 간단한 상태 변화에는 트랜지션을, 복잡한 시퀀스에는 애니메이션을 사용하세요.
애니메이션을 무한 반복하려면 어떻게 하나요?
animation-iteration-count: infinite를 사용하면 애니메이션이 무한 반복됩니다. 단축 속성에서는 'animation: myAnimation 2s infinite;'처럼 사용합니다. direction을 alternate로 설정하면 부드럽게 왕복하는 효과를 만들 수 있습니다.
fill-mode는 무엇이고 왜 중요한가요?
animation-fill-mode는 애니메이션 전후에 스타일을 어떻게 적용할지 결정합니다. 'forwards'는 애니메이션 종료 후 최종 상태를 유지하고, 'backwards'는 지연 시간 동안 시작 상태를 적용합니다. 'both'는 두 효과를 모두 적용합니다.
애니메이션 성능을 최적화하려면 어떻게 하나요?
transform과 opacity만 애니메이션하면 GPU 가속을 받아 성능이 좋습니다. width, height, top, left 등은 리플로우를 발생시켜 성능이 저하됩니다. will-change 속성으로 브라우저에 힌트를 줄 수 있지만 과도하게 사용하면 역효과가 납니다.
JavaScript 없이 애니메이션을 제어할 수 있나요?
animation-play-state: paused를 사용하면 CSS만으로 애니메이션을 일시정지할 수 있습니다. :hover나 :focus 상태에서 이 속성을 변경하여 사용자 상호작용으로 제어할 수 있습니다. 더 정밀한 제어가 필요하면 JavaScript의 Web Animations API를 사용하세요.