CSS 애니메이션 Keyframes & 이징 곡선 생성기
@keyframes 이동, 회전, 스케일 및 cubic-bezier 타임라인 시각적 생성
바운스, 페이드, 바이브레이션 등 CSS `@keyframes` 모션 애니메이션 속성을 슬라이더로 조작하며 코드를 생성합니다.
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
사용 방법
- 애니메이션 이름, 시간, Y축 이동값, 스케일 수치를 조절합니다.
- 실시간 박스 모션을 확인하고 CSS 코드를 복사합니다.
자주 묻는 질문
- 어떻게 HTML에 적용하나요?
- 복사한 `@keyframes` 및 클래스 CSS 구문을 웹사이트 스타일시트에 붙여넣으면 됩니다.