CSS 애니메이션 생성기 무료 온라인: 시각적으로 애니메이션 만들기
0 회 사용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 속성 모두 생성됩니다.
사용 방법
- 프리셋 선택 또는 수동 설정
- 지속 시간, 딜레이, 반복 조절
- timing function 선택
- 애니메이션 미리보기
- @keyframes 포함 CSS 코드 복사