CSS 애니메이션 생성기 무료 온라인: 시각적으로 애니메이션 만들기
14 회 사용CSS 애니메이션 팁
애니메이션 프리셋
bounce, fade, slide, rotate, pulse 등 프리셋. 파라미터 맞춤.
지속 시간과 타이밍
지속 시간, 딜레이, 반복 횟수 조절. linear, ease, ease-in, ease-out, ease-in-out.
완전한 CSS 코드
@keyframes와 animation 속성 모두 생성. 복사하여 바로 사용.
자주 묻는 질문
CSS 애니메이션을 어떻게 만드나요?
프리셋을 선택하거나 수동으로 지속 시간, 딜레이, 반복, timing function을 설정. 라이브 미리보기.
timing function이란?
애니메이션 속도 제어: linear(일정), ease(부드러운), ease-in(느리게 시작), ease-out(느리게 끝), ease-in-out(양쪽).
@keyframes도 생성되나요?
네, @keyframes 규칙과 animation 속성 모두 생성됩니다.
애니메이션을 다시 만들지 않고 지속 시간을 조정할 수 있나요?
물론입니다. 생성기에서 '지속 시간' 슬라이더를 찾으세요. 왼쪽으로 드래그하면 시간이 줄어들어 애니메이션이 더 빨라집니다. 오른쪽으로 드래그하면 시간이 늘어납니다. 라이브 미리보기가 즉시 업데이트되어 1.5초 애니메이션과 0.5초 애니메이션이 어떻게 보이는지 정확하게 보여줍니다. 이를 통해 실시간으로 타이밍을 미세 조정할 수 있습니다.
이 생성기가 호버 효과와 스크롤 트리거 애니메이션에도 작동하나요?
네, 하지만 명확한 차이가 있습니다. 이 도구는 페이지 로드 시 또는 CSS 클래스를 통해 실행되는 CSS 애니메이션을 생성합니다. 호버 효과의 경우 생성된 애니메이션을 직접 `:hover` 가상 클래스로 감싸야 합니다. 전용 호버 토글은 아직 없습니다. 스크롤 트리거 애니메이션은 JavaScript(Intersection Observer 등)가 필요하며, 요소가 화면에 들어올 때 클래스를 추가합니다. 생성기는 핵심 애니메이션을 제공하고, 실행 시점은 사용자가 제어합니다. 실용적인 팁: 코드를 내보내고 기본적으로 `paused` 상태를 설정한 후, 스크롤 시 JS로 재개하세요.
사용 방법
- 프리셋 선택 또는 수동 설정
- 지속 시간, 딜레이, 반복 조절
- timing function 선택
- 애니메이션 미리보기
- @keyframes 포함 CSS 코드 복사