CSS Animation & Keyframes Generator
시각적인 키프레임 제어와 프리셋으로 역동적인 CSS 애니메이션을 만드세요.
Box
💻 CSS Code
/* CSS 코드가 여기에 생성됩니다 */
📖 사용 방법
- Properties: 재생 시간(Duration), 지연 시간(Delay), 속도 곡선(Timing) 등을 설정합니다.
- Keyframes: 애니메이션이 진행될 때(100% 시점) 요소가 가질 최종 상태를 슬라이더로 조절합니다. (0%는 기본 상태로 자동 설정됩니다.)
- Presets: 자주 사용되는 역동적인 애니메이션 효과를 클릭 한 번으로 불러올 수 있습니다.
- Live: 모든 변경 사항은 즉시 프리뷰 박스에 반영되며, 하단에서 `@keyframes` 코드를 포함한 전체 CSS를 복사할 수 있습니다.