CSS 이징 조정
cubic-bezier 곡선을 보면서 CSS transition과 animation에 사용할 이징을 조정할 수 있습니다.
커브ease
핸들을 드래그하거나 숫자를 입력해 커브를 조정할 수 있습니다.
현재 값cubic-bezier(0.25, 0.1, 0.25, 1)
미리보기
같은 이징으로 요소가 이동합니다. 값을 바꾸면 미리보기가 다시 재생됩니다.
CSS
CSS transition 또는 animation의 timing function으로 사용할 수 있습니다.
.element {
transition: transform 420ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.element.is-active {
transform: translateX(120px);
}이 도구에 대해
cubic-bezier 곡선을 보면서 CSS transition과 animation에 사용할 이징을 조정할 수 있습니다.
- 이 도구는 브라우저 안에서 처리됩니다. 파일이나 입력 내용은 처리를 위해 서버로 업로드되지 않습니다.
사용 사례
- CSS transition과 animation에 사용할 이징 조정하기
- 프리셋을 바탕으로 cubic-bezier 움직임 확인하기
- 조정한 값을 CSS 코드로 복사하기
자주 묻는 질문
- 무엇을 할 수 있나요?
- cubic-bezier 곡선을 보면서 CSS transition과 animation에 사용할 이징을 조정할 수 있습니다.
- 입력 내용은 어떻게 처리되나요?
- 처리는 브라우저 안에서 이루어집니다. 파일이나 입력 내용은 처리를 위해 서버로 전송되지 않습니다.
- CSS 기본 이징 프리셋만으로 충분하지 않나요?
- 대부분은 충분합니다. UI 반응이나 움직임의 여운을 더 세밀하게 조정해야 할 때는 cubic-bezier 값을 미리 보면서 조정하는 편이 좋습니다.