Developer Design Utility
CSS Animation 생성기
Fade, Slide, Scale, Bounce, Pulse 같은 CSS 애니메이션을 실시간 미리보기로 조절하고, @keyframes와 animation 코드를 바로 생성할 수 있습니다.
Animation 설정
애니메이션 타입, 속도, 반복 방식, 움직임 강도를 조절해 원하는 UI 모션을 만들어보세요.
기본으로 생성할 @keyframes 타입을 선택합니다.
CSS @keyframes 이름과 클래스 코드에 사용됩니다.
움직임의 가속도와 감속 곡선을 선택합니다.
무한 반복은 로딩, 강조 배지, 장식 요소에만 제한적으로 사용하는 것을 권장합니다.
정방향, 역방향, 왕복 실행 방식을 선택합니다.
설정한 애니메이션이 여기에 실시간으로 적용됩니다.
추천 프리셋
카드 등장, 버튼 강조, 로딩 장식, 알림 효과에 자주 사용하는 애니메이션 조합입니다.
기본 등장 효과
강조 / 인터랙션
장식 / 루프 애니메이션
생성 결과
아래 코드를 CSS 파일에 붙여넣고 원하는 요소에 클래스를 적용하세요.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
도움말
CSS Animation 생성기는 언제 사용하나요?
버튼, 카드, 모달, 알림 박스, 랜딩 페이지 섹션에 움직임을 추가하고 싶을 때 사용합니다. 미리보기로 움직임을 확인한 뒤 @keyframes와 animation 속성을 바로 복사할 수 있습니다.
animation 속성의 주요 구성
- animation-name: 실행할 @keyframes 이름
- animation-duration: 애니메이션이 한 번 실행되는 시간
- animation-timing-function: 움직임의 가속도 곡선
- animation-delay: 시작 전 대기 시간
- animation-iteration-count: 반복 횟수
- animation-direction: 정방향, 역방향, 왕복 실행 방식
추천 사용 방식
- 일반 카드 등장 효과: 0.5초 ~ 0.9초
- 버튼 hover 강조 효과: 0.2초 ~ 0.4초
- 모달 등장 효과: 0.3초 ~ 0.6초
- 무한 반복 효과: 로딩, 강조 배지, 장식 요소에만 제한적으로 사용
성능 팁
브라우저 성능을 고려하면 width, height, top, left보다 transform과 opacity 기반 애니메이션을 사용하는 것이 좋습니다. 이 생성기는 대부분 transform과 opacity 중심의 keyframes를 생성합니다.
무한 반복 애니메이션은 많이 사용해도 괜찮나요?
무한 반복 애니메이션은 사용자의 시선을 계속 끌고 성능에도 영향을 줄 수 있습니다. 로딩 상태, 강조 배지, 장식 요소처럼 목적이 분명한 곳에만 사용하는 것을 권장합니다.
자연스러운 등장 애니메이션은 어떻게 만들 수 있나요?
Fade와 Slide를 함께 사용하는 방식이 가장 자연스럽습니다. duration은 0.6초~0.9초, easing은 ease-out 또는 smooth cubic-bezier를 추천합니다.
prefers-reduced-motion은 왜 필요한가요?
일부 사용자는 움직임 효과에 민감할 수 있습니다. prefers-reduced-motion 대응 코드를 추가하면 사용자의 접근성 설정에 따라 애니메이션을 줄일 수 있습니다.