CSS 애니메이션 빌더

CSS 애니메이션을 시각적으로 디자인합니다. 키프레임 편집기, 타이밍 곡선, 프리셋, CSS 출력.

프리셋

실시간 미리보기

대상 요소

유형

Size: 80px

색상

애니메이션 속성

Duration: 1s

Delay: 0s

타이밍 함수

Iterations (infinite)

Direction

Fill 모드

Keyframes (2)

100%

Keyframe at 0%

Position: 0%

Opacity: 1

Translate X: 0px

Translate Y: 0px

Rotate: 0deg

Scale: 1

Border Radius: 8px

배경색

생성된 CSS

@keyframes custom-animation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #10b981;
    border-radius: 8px;
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #10b981;
    border-radius: 8px;
  }
}

.animated-element {
  animation: custom-animation 1s ease 0s infinite normal both;
}

CSS 애니메이션 시각적으로 만드는 방법

The IT Hustle의 무료 CSS Animation Builder로 시각적 편집기를 사용해 CSS 키프레임 애니메이션을 디자인하세요.

1
대상 요소 선택애니메이션할 대상을 선택하세요: 박스, 원, 텍스트, 버튼. 크기와 색상을 커스터마이즈할 수 있습니다.
2
키프레임 추가타임라인을 클릭해 키프레임 지점을 추가하세요. 각 키프레임마다 transform(translate, rotate, scale), 불투명도, 색상을 설정하세요.
3
타이밍 설정지속 시간, 이징(시각적 곡선 편집기 사용), 지연, 반복 횟수, 방향을 설정하세요.
4
CSS 복사생성된 @keyframes와 애니메이션 CSS가 실시간으로 업데이트됩니다. 복사해 프로젝트에 붙여넣으세요.

자주 묻는 질문

가능합니다. Fade In, Slide In Left, Bounce, Pulse, Shake, Spin, Flip, Rubber Band 등의 프리셋이 있습니다. 프리셋을 클릭해 불러온 뒤 원하는 대로 조정하세요.

네 개의 제어점으로 정의된 커스텀 이징 곡선입니다. 시각적 곡선 편집기에서 제어점을 드래그해 느리게 시작하거나 통통 튀며 끝나는 등 원하는 느낌의 커스텀 이징을 만들 수 있습니다.

가능합니다. 각 키프레임에서 transform(translateX/Y, rotate, scale), opacity, background-color, border-radius를 동시에 설정할 수 있습니다.

CSS 애니메이션 빌더

CSS 애니메이션 시각적으로 만드는 방법

자주 묻는 질문

관련 도구

CSS 애니메이션 빌더

CSS 애니메이션 시각적으로 만드는 방법

자주 묻는 질문

관련 도구