이런 분께 유용합니다
- 진입·강조 효과를 만드는 프론트엔드 개발자
- 애니메이션 속성을 비교하는 웹 디자이너
- 움직임 접근성을 점검하는 콘텐츠 운영자
Developer Design Utility
CSS Animation 생성기
Fade, Slide, Scale, Bounce, Pulse 같은 CSS 애니메이션을 실시간 미리보기로 조절하고, @keyframes와 animation 코드를 바로 생성할 수 있습니다.
Animation 코드 생성
duration, delay, easing, 반복 횟수, 방향을 조합해 CSS animation 코드를 만듭니다.
실시간 미리보기
선택한 애니메이션 효과를 Preview Card에서 바로 확인할 수 있습니다.
@keyframes 출력
클래스 코드, keyframes, prefers-reduced-motion 대응 코드까지 함께 생성합니다.
Animation Type
Fade In
Duration
1s
Easing
ease
Iteration
1
Animation 설정
애니메이션 타입, 속도, 반복 방식, 움직임 강도를 조절해 원하는 UI 모션을 만들어보세요.
기본으로 생성할 @keyframes 타입을 선택합니다.
CSS @keyframes 이름과 클래스 코드에 사용됩니다.
0.2s
1s
5s
0s
0s
3s
움직임의 가속도와 감속 곡선을 선택합니다.
무한 반복은 로딩, 강조 배지, 장식 요소에만 제한적으로 사용하는 것을 권장합니다.
정방향, 역방향, 왕복 실행 방식을 선택합니다.
10
40
120
Live Preview
CSS Animation
Preview Card
설정한 애니메이션이 여기에 실시간으로 적용됩니다.
Type
Fade In
Duration
1s
Iteration
1
추천 프리셋
카드 등장, 버튼 강조, 로딩 장식, 알림 효과에 자주 사용하는 애니메이션 조합입니다.
기본 등장 효과
강조 / 인터랙션
장식 / 루프 애니메이션
생성 결과
아래 코드를 CSS 파일에 붙여넣고 원하는 요소에 클래스를 적용하세요.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
CSS 애니메이션을 움직임 줄이기와 성능까지 고려해 적용하는 법
CSS 애니메이션은 주의를 유도하고 상태 변화를 설명할 수 있지만 과도한 움직임은 사용을 방해할 수 있습니다. 지속 시간과 반복 횟수뿐 아니라 유효한 이름, 복합 속성, 사용자의 움직임 줄이기 설정까지 함께 설계해야 합니다.
대표 활용 상황
- 간단한 페이드·슬라이드 효과를 시험할 때
- duration과 easing 조합을 비교할 때
- prefers-reduced-motion 대체 규칙이 포함된 코드를 만들 때
처음부터 결과 확인까지
- 1
fade, slide, scale, rotate, bounce, shake, float, pulse 중 움직임을 선택합니다.
- 2
용도를 알 수 있는 애니메이션 이름을 입력합니다.
- 3
지속 시간·지연·이징·반복 횟수·방향을 설정합니다.
- 4
다시 재생해 시작과 종료 상태를 확인합니다.
- 5
생성 CSS를 실제 레이아웃과 움직임 줄이기 설정에서 시험합니다.
짧은 진입 효과
- 입력
- fade, 0.4초, ease-out, 1회
- 결과
- 불투명도가 0에서 1로 바뀝니다.
fill-mode는 both로 고정되며 별도 선택 항목은 없습니다.
부드러운 떠오름
- 입력
- float, 거리 20px, alternate, infinite
- 결과
- translateY(0)과 translateY(-20px) 사이를 움직입니다.
연속 회전이 아닌 떠오름 프리셋입니다.
계산·처리 기준
프리셋의 transform·opacity 키프레임에 이름, 지속 시간, 이징, 지연, 횟수, 방향, 고정 fill-mode both를 조합합니다. linear처럼 축약 속성의 키워드와 겹치는 이름에는 접두사를 붙입니다. reduced-motion에서는 애니메이션을 끄고 요소를 보이는 상태로 돌립니다.
알아둘 한계
- 임의의 키프레임을 편집하는 도구는 아닙니다.
- rotate는 진입 회전이며 360도 연속 회전 프리셋은 없습니다.
- 기존 transform과 충돌하거나 실제 레이아웃에서 결과가 달라질 수 있습니다.
- 움직임을 멈춘 상태에서도 변화가 이해되는지 별도로 확인해야 합니다.
개인정보 처리
애니메이션 설정과 미리보기는 브라우저에서 처리하며 입력한 이름과 값은 서버로 전송하지 않습니다.
참고 자료
함께 쓰면 좋은 도구
- CSS Clamp 생성기
반응형 크기 값을 계산해 애니메이션 대상의 레이아웃을 조절합니다.
- 색상 대비 검사기
움직이는 요소의 전경과 배경 대비를 확인합니다.
자주 묻는 질문
linear를 이름으로 쓸 수 있나요?
이징 키워드와 겹치지 않도록 animation-linear로 정리합니다.
fill-mode를 변경할 수 있나요?
현재 both를 출력합니다. 다른 값이 필요하면 생성한 코드를 수정하세요.
움직임 줄이기 규칙은 왜 필요한가요?
움직임 감소를 요청한 사용자를 위한 대체 표시입니다. 실제 구성에서도 정상적으로 읽히는지 확인하세요.