랩

모션 그래프

베지어 곡선을 직접 드래그하거나 프리셋을 골라 CSS easing을 디자인. 라이브 데모로 즉시 확인하고 keyframe·timing 함수를 한 줄로 export.

베지어 그래프

P1 (0.25, 0.10) · P2 (0.25, 1.00)

보라색 점을 드래그해 곡선 조작 — overshoot(0~1 박스 밖)도 가능. 정밀 조정은 Curve 탭의 슬라이더로.

라이브 데모· 이동

루프 모드 — 자동 반복 (역방향 포함). 끄면 단일 재생.

프리셋

가로 스크롤·스와이프로 모두 보기 · 클릭하면 즉시 적용

베지어 제어점

정밀 슬라이더 조정

0.25

0.10

0.25

1.00

✓ 현재 곡선은 프리셋 Ease와 일치

X1·X2 범위 0~1 (CSS spec 강제). Y1·Y2는 overshoot 허용으로 -0.5 ~ 1.5.

애니메이션 설정

속성 · 재생 시간 · 반복

애니메이션 속성

재생 시간

1200ms

자동 반복 (역방향 포함)끄면 단일 재생 — '다시 재생' 버튼으로 트리거

베지어 그래프

P1 (0.25, 0.10) · P2 (0.25, 1.00)

보라색 점을 드래그해 곡선 조작 — overshoot(0~1 박스 밖)도 가능. 정밀 조정은 Curve 탭의 슬라이더로.

라이브 데모· 이동

루프 모드 — 자동 반복 (역방향 포함). 끄면 단일 재생.

프리셋 — 클릭하면 즉시 적용

CSS

.my-element {
  animation: my-anim 1200ms ease infinite alternate;
  /* 또는 transition 형태:
  transition: transform 1200ms ease; */
}

@keyframes my-anim {
  from { transform: translateX(0); }
  to   { transform: translateX(220px); }
}

HTML

<div class="my-element">박스</div>

.my-element {
  animation: my-anim 1200ms ease infinite alternate;
  /* 또는 transition 형태:
  transition: transform 1200ms ease; */
}

@keyframes my-anim {
  from { transform: translateX(0); }
  to   { transform: translateX(220px); }
}