색상 및 디자인
Cubic Bezier 편집기
무료 cubic-bezier 편집기입니다. 핸들, 사전 설정 및 실시간 애니메이션 미리보기를 사용하여 CSS easing 곡선을 시각적으로 디자인하세요. 전환 및 애니메이션에 대한 CSS를 복사하세요.
Runs in your browser
Cubic-bezier editor
CSS
transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);css
편집자 노트
Understanding · Time, but with feeling.
이 심층 챕터는 현재 영어로만 제공됩니다. 위의 변환 도구는 귀하의 언어로 작동하지만, 긴 설명 글은 아직 번역되지 않았습니다.
자주 묻는 질문
Quick answers.
›What's a cubic-bezier?
A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).
›What's overshoot?
When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.
›Are presets available?
Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.
›Is the editor free?
Yes — fully free, no signup.
사람들이 다음도 검색합니다.
관련 도구