CSS 애니메이션 Keyframes & 이징 곡선 생성기
@keyframes 이동, 회전, 스케일 및 cubic-bezier 타임라인 시각적 생성
바운스, 페이드, 바이브레이션 등 CSS `@keyframes` 모션 애니메이션 속성을 슬라이더로 조작하며 코드를 생성합니다. 별도의 프로그램 설치나 복잡한 회원가입 없이 웹 브라우저에서 즉시 실행되며, 입력한 데이터는 외부 서버로 유출되지 않고 안전하게 로컬 환경에서 처리됩니다. 직관적인 사용자 인터페이스를 통해 초보자부터 전문가까지 누구나 오차 없이 빠르고 정확하게 원하는 결과를 도출할 수 있습니다.
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
사용 방법
- 애니메이션 이름, 시간, Y축 이동값, 스케일 수치를 조절합니다.
- 실시간 박스 모션을 확인하고 CSS 코드를 복사합니다.
- 도출된 결과 데이터를 확인한 후 클립보드에 복사하거나 파일로 저장해 사용합니다.
자주 묻는 질문
- 어떻게 HTML에 적용하나요?
- 복사한 `@keyframes` 및 클래스 CSS 구문을 웹사이트 스타일시트에 붙여넣으면 됩니다.
- cubic-bezier 이징 곡선도 직접 조정할 수 있나요?
- 네, 타임라인 그래프에서 제어점을 드래그하면 가속·감속 구간을 원하는 형태로 조정한 뒤 해당 값이 CSS 코드에 그대로 반영됩니다.
- 무한 반복이나 역방향 재생도 설정할 수 있나요?
- 네, 반복 횟수(무한 포함)와 alternate(역방향) 재생 옵션을 지정하면 animation-iteration-count와 animation-direction 값이 함께 생성됩니다.