CSS 애니메이션 생성기
직관적으로 CSS 애니메이션(@keyframes)을 만듭니다.
12가지 사전 설정, 매개변수 조정, 실시간 미리보기를 지원합니다.
애니메이션 설정
CSS 코드 출력
CSS 애니메이션 생성기 소개
"CSS 애니메이션 생성기"는 CSS @keyframes를 사용하는 애니메이션 움직임을 시각적으로 확인하고 필요한 CSS 코드를 자동으로 생성해 주는 무료 도구입니다. 페이드인, 슬라이드, 크기 조절, 바운스 등 12가지의 기본 애니메이션(사전 설정)을 포함하고 있습니다.
슬라이더 및 선택 상자를 통해 지속 시간, 지연 시간, 이징, 반복 횟수, 채우기 모드 등의 속성을 직관적으로 조정하고, 미리보기 영역에서 실시간으로 결과를 확인할 수 있습니다.
조정이 완료되면 생성된 CSS 코드를 복사하여 프로젝트에 바로 붙여넣어 사용하세요. 모든 처리는 브라우저 내에서 이루어지며 외부 서버와의 통신이 없으므로 안전하게 사용할 수 있습니다.
CSS 애니메이션 생성 단계
기본 움직임 선택
먼저 "페이드", "슬라이드" 등 탭을 전환하고 원하는 효과에 가까운 사전 설정을 선택합니다.
매개변수 조정
슬라이더를 사용하여 지속 시간, 지연 시간, 가속도 등을 변경하고 오른쪽의 미리보기 영역에서 실제 움직임을 확인합니다.
CSS 코드 복사
움직임이 마음에 들면 출력 영역에서 "코드 복사" 버튼을 클릭하고 자신의 CSS 파일에 붙여넣습니다.
CSS 애니메이션 용어 사전 (속성 가이드)
animation-duration(지속 시간)- 애니메이션의 1회 반복 재생 시간(완료까지 걸리는 시간)을 지정합니다. 초(s) 또는 밀리초(ms)로 지정됩니다.
animation-timing-function(가속도/Easing)- 애니메이션의 속도 곡선(가속/감속)을 지정합니다. 일정한 속도의 "linear"나 서서히 시작하고 끝나는 "ease-in-out" 등이 있습니다.
animation-delay(지연 시간)- 애니메이션이 시작되기 전 대기 시간(지연)을 지정합니다.
animation-iteration-count(반복 횟수)- 애니메이션 반복 횟수를 지정합니다. "infinite"를 지정하면 무한히 반복됩니다.
animation-direction(재생 방향)- 애니메이션 재생 방향을 지정합니다. 역방향인 "reverse", 홀수 번은 정방향, 짝수 번은 역방향으로 재생하는 "alternate" 등이 있습니다.
animation-fill-mode(채우기 모드)- 애니메이션 실행 전/후에 요소의 스타일(상태)을 어떻게 유지할지 지정합니다. "forwards"로 설정하면 애니메이션 종료 시의 스타일을 유지합니다.
transition-property(트랜지션 속성)- 트랜지션을 적용할 속성 이름입니다 (예: transform, opacity, all).
transition-duration(트랜지션 지속 시간)- 트랜지션이 완료되는 데 걸리는 시간입니다.
transition-timing-function(트랜지션 가속도)- 트랜지션의 속도 변화 곡선(Easing)입니다.
CSS 애니메이션 자주 묻는 질문 (FAQ)
- Q.CSS 애니메이션과 트랜지션의 차이점은 무엇인가요?
transition은 상태 변화(예: hover)에 의해 트리거되어 두 상태 사이를 보간합니다.animation은 트리거 없이 자동으로 재생될 수 있으며 @keyframes를 사용하여 중간 상태를 세밀하게 정의할 수 있습니다.- Q.어떤 애니메이션이 성능이 가장 좋나요?
transform(translate, scale, rotate)과opacity를 사용하는 애니메이션은 GPU 가속을 받기 때문에 속도가 빠릅니다.width,height,margin등에 애니메이션을 적용하면 브라우저 리플로우(reflow)를 유발하여 성능이 저하될 수 있습니다.- Q.prefers-reduced-motion이 무엇인가요?
- 애니메이션으로 인해 멀미를 느끼는 사용자를 위한 미디어 쿼리입니다. 접근성을 위해
@media (prefers-reduced-motion: reduce)를 사용하여 애니메이션을 비활성화하거나 줄이는 것을 권장합니다. - Q.animation-fill-mode forwards는 필수인가요?
- 페이드인(fade-in)과 같은 애니메이션의 경우,
forwards를 지정하지 않으면 애니메이션 종료 시 요소가 원래 상태(예: opacity: 0)로 되돌아갑니다. 애니메이션 종료 후의 스타일을 화면에 유지하려면 지정해야 합니다. - Q.내 데이터가 서버로 전송되나요?
- 아니요. 모든 처리는 브라우저 내부에서 로컬로 완료되며, 외부로 데이터가 전송되지 않습니다.
CSS 애니메이션 활용 사례
페이지 로드 애니메이션
콘텐츠가 부드럽게 나타나는 페이드인 효과나, 하단에서 올라오는 슬라이드인 효과를 적용하여 페이지 첫인상을 개선합니다.
버튼 및 CTA 강조
전환을 유도하는 버튼에 펄스(고동침) 효과나 바운스(점프) 애니메이션을 적용하여 사용자의 시선을 자연스럽게 이끕니다.
스크롤 트리거 애니메이션
Intersection Observer API와 생성된 CSS 애니메이션 클래스를 결합하여, 요소가 화면에 들어오는 순간 효과가 나타나게 만듭니다.
로딩/대기 UI
데이터를 불러오거나 양식을 제출할 때 피드백을 제공하기 위해 무한히 회전하거나 깜박이는 로딩 애니메이션을 구현합니다.
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.