무료 애니메이션 타이밍 도구
프로덕션 UI 모션을 위한 Cubic Bezier 생성기
이징 곡선을 시각적으로 편집하고 즉시 미리 본 뒤 CSS, JavaScript, Tailwind, Framer Motion 코드로 복사할 수 있습니다.
곡선 편집기
cubic-bezier(.25, .1, .25, 1)
시각적 이징 편집기로 더 부드러운 CSS 애니메이션 만들기
Motion Curve Studio는 팀이 감으로 숫자를 맞추지 않고도 안정적인 애니메이션 타이밍 함수를 만들 수 있게 돕습니다.
Cubic Bezier FAQ
cubic-bezier 이징 곡선이란?
두 개의 제어점으로 애니메이션의 가속과 감속을 정의하는 CSS 타이밍 함수입니다.
Tailwind CSS에서 사용할 수 있나요?
네. Tailwind 출력 값을 theme easing 설정에 추가하면 됩니다.
왜 시각 편집기를 쓰나요?
속도감, 오버슈트, 완성도를 보면서 조정할 수 있어 더 자연스러운 모션을 만들 수 있습니다.