6XC

CSS 애니메이션 생성기

키프레임 프리셋(회전, 펄스, 바운스, 흔들림, 페이드, 슬라이드)을 고르고 재생 시간과 반복 횟수를 조정한 뒤 @keyframes와 클래스를 복사하세요.

조회수 638회

CSS 애니메이션이란

애니메이션은 무엇이 바뀌는지를 정의하는 @keyframes 블록과, 어떻게 재생되는지(재생 시간, 타이밍 함수, 반복 횟수)를 지정하는 animation 속성을 결합한 것입니다. 트랜지션과 달리 호버나 클래스 전환 없이도 스스로 재생됩니다. 이 생성기는 여섯 가지 프리셋을 제공하며, keyframes와 바로 사용할 수 있는 클래스를 함께 만들어 줍니다.

자주 묻는 질문

애니메이션과 트랜지션 중 무엇을 써야 하나요?

트랜지션은 상태 변화(호버, 클래스 전환 등)에 반응해서 동작합니다. 애니메이션은 스스로 재생되며 무한 반복이 가능하고 여러 단계를 정의할 수 있습니다 — 스피너, 시선을 끄는 펄스, 등장 효과에는 애니메이션을 사용하세요.

움직임을 적게 원하는 사용자를 어떻게 배려하나요?

애니메이션을 @media (prefers-reduced-motion: no-preference) { … } 안에 넣거나, reduce 설정일 때는 비활성화하세요 — 전정 감각에 민감한 사용자들이 고마워할 것입니다.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기