CSS keyframes 생성기
시작 값과 끝 값을 입력해 @keyframes와 animation CSS 코드를 생성합니다.
이 도구에 대해
자주 쓰는 from/to 구조의 @keyframes와 animation 선언을 빠르게 생성합니다.
작은 등장 애니메이션, 페이드, 이동 효과, 버튼 모션을 만들 때 반복 입력을 줄여줍니다.
결과
사용 방법
- 1
필요한 값을 입력하거나 텍스트를 붙여넣습니다.
- 2
옵션이나 단위를 원하는 방식으로 조정합니다.
- 3
표시된 결과를 확인하고 필요한 곳에 복사해 사용합니다.
기능
즉시 결과
값을 입력하면 결과가 브라우저에서 바로 업데이트됩니다.
브라우저 처리
입력값은 서버로 업로드하지 않고 기기 안에서 처리됩니다.
간단한 입력
반복 사용에 맞춘 명확한 입력 필드와 출력값을 제공합니다.
무료 사용
가입이나 설치 없이 바로 사용할 수 있습니다.
주요 사용 사례
- ›컴포넌트 등장 애니메이션의 기본 keyframes를 만듭니다.
- ›속성, 시간, 이징, 반복 횟수를 바꿔 여러 모션 후보를 비교합니다.
- ›디자인 시스템이나 CSS 파일에 넣을 animation 선언을 복사합니다.