Developer Design Utility
CSS Animation 생성기
duration, delay, easing, 반복 횟수, 방향, keyframes 값을 조절해 CSS animation 코드를 만들고 실시간 미리보기로 확인할 수 있습니다.
Animation 생성
duration, delay, timing-function, 반복 횟수 설정
실시간 미리보기
선택한 애니메이션 효과를 즉시 확인
CSS 코드 복사
@keyframes와 animation 코드를 바로 복사
Animation 설정
애니메이션 타입과 속도, 반복 방식, 움직임 강도를 설정하세요.
기본 keyframes 타입을 선택합니다.
CSS @keyframes 이름입니다.
0.2s
1s
5s
0s
0s
3s
10
40
120
추천 프리셋
Preview
CSS Animation
Preview Card
설정한 애니메이션이 여기에 적용됩니다.
Type
Fade In
Duration
1s
Iteration
1
생성 결과
아래 코드를 CSS 파일에 붙여넣고 원하는 요소에 클래스를 적용하세요.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
도움말
CSS Animation은 어디에 사용하나요?
버튼, 카드, 모달, 알림 박스, 랜딩 페이지 섹션 등에 움직임을 추가할 때 사용합니다. 과한 애니메이션보다 짧고 자연스러운 전환을 사용하는 것이 사용자 경험에 좋습니다.
값의 의미
- Duration: 애니메이션이 한 번 실행되는 시간
- Delay: 애니메이션 시작 전 대기 시간
- Timing Function: 움직임의 가속도 곡선
- Iteration Count: 반복 횟수
- Direction: 정방향, 역방향, 왕복 실행 방식
팁
일반 UI에서는 0.4초에서 1초 사이의 duration을 추천합니다. 무한 반복 애니메이션은 로딩, 강조 배지, 장식 요소처럼 목적이 분명한 곳에만 사용하는 것이 좋습니다.