CSS 애니메이션 생성기

이 도구 소개

CSS 애니메이션 생성기는 페이드 인, 슬라이드 인, 바운스 인, 펄스, 회전, 흔들기, 줌 등 14가지 프리셋으로 @keyframes 애니메이션을 만들며, 재생 시간, 타이밍 함수, 반복 횟수를 조절할 수 있습니다.

사용 방법

1. 애니메이션 프리셋을 고릅니다.
2. 재생 시간, 타이밍 함수, 반복 횟수를 설정합니다.
3. 다시 재생을 눌러 미리 봅니다.
4. CSS 복사를 눌러 @keyframes와 animation 규칙을 가져옵니다.

알아두면 좋은 점

• CSS 애니메이션은 @keyframes 규칙과 요소에 지정하는 animation 속성, 두 부분으로 이루어집니다.
• 성능 면에서는 transform과 opacity를 애니메이션하는 것이 대개 가장 부드럽습니다.
• ease-out 같은 타이밍 함수는 빠르게 시작해 느려지므로 등장 효과에 자연스럽게 느껴집니다.
• 움직임을 줄이도록 설정한 사용자를 위해 prefers-reduced-motion 미디어 쿼리를 존중하세요.
• 무한 반복은 로딩 표시에 어울리고, 등장 효과는 보통 한 번만 실행합니다.

모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.

자주 묻는 질문