CSS 애니메이션 생성기
CSS 애니메이션을 라이브 미리보기로 생성합니다. 프리셋, 타이밍 함수, 지연, 반복, 방향을 조정하세요. @keyframes 코드 복사. 무료, 100% 브라우저에서 실행.
미리보기
CSS 출력
참고
CSS 애니메이션이란?
CSS 애니메이션은 @keyframes 규칙과 animation 속성을 사용하여 요소에 애니메이션 효과를 적용합니다. JavaScript 없이 부드러운 애니메이션을 구현할 수 있으며, 트랜지션보다 더 복잡한 동작을 제어할 수 있습니다.
애니메이션 프리셋
페이드 — 불투명도로 요소의 표시/숨김을 제어. 슬라이드 — 지정 방향으로 요소를 이동. 스케일 — 요소의 확대/축소. 회전 — 요소를 회전. 바운스 — 튀어오르는 움직임. 셰이크 — 좌우로 흔들리는 움직임. 펄스 — 확대 축소를 반복하는 맥동 효과.
개인정보보호
모든 생성 처리는 브라우저에서 100% 실행됩니다. 데이터는 서버에 전송되지 않습니다.