CSS 키프레임 애니메이션을 시각적으로 제작합니다. 16개 프리셋에서 선택하고, 타이밍을 커스터마이즈하고, 코드를 즉시 복사하세요. 100% 무료.
이 도구는 코드를 작성하지 않고 CSS @keyframes 애니메이션을 제작하는 데 도움을 줍니다. fade, bounce, pulse, rotate 등 16개의 내장 프리셋 중에서 선택하고, 지속 시간, 지연 시간, easing 등을 커스터마이즈할 수 있습니다. 변경 사항을 실시간으로 확인하고 즉시 사용할 수 있는 CSS를 복사하세요.
CSS @keyframes는 애니메이션 시퀀스의 중간 단계를 정의합니다. 주요 퍼센트 지점(0%, 50%, 100%)에서 CSS 스타일을 지정하고, 브라우저는 이를 보간하여 부드러운 애니메이션을 만듭니다.
네! 생성된 CSS는 표준 @keyframes와 animation 속성을 사용하여 모든 최신 브라우저에서 지원됩니다. JavaScript 런타임이 필요 없습니다.
생성된 CSS 클래스를 함께 사용하거나, shorthand 속성에서 쉼표로 애니메이션 이름을 연결하여 여러 애니메이션을 결합할 수 있습니다.