CSS 이징 생성기
cubic-bezier 값을 조정하고 transition CSS와 곡선 미리보기를 생성합니다.
이 도구에 대해
x1, y1, x2, y2 값을 직접 조정해 cubic-bezier 이징 값을 만들 수 있습니다.
버튼 hover, 모달, 카드 이동, 인터랙션 애니메이션의 느낌을 빠르게 비교하는 데 적합합니다.
곡선 미리보기
이징 값
cubic-bezier(0.25, 0.1, 0.25, 1)
결과
사용 방법
- 1
필요한 값을 입력하거나 텍스트를 붙여넣습니다.
- 2
옵션이나 단위를 원하는 방식으로 조정합니다.
- 3
표시된 결과를 확인하고 필요한 곳에 복사해 사용합니다.
기능
즉시 결과
값을 입력하면 결과가 브라우저에서 바로 업데이트됩니다.
브라우저 처리
입력값은 서버로 업로드하지 않고 기기 안에서 처리됩니다.
간단한 입력
반복 사용에 맞춘 명확한 입력 필드와 출력값을 제공합니다.
무료 사용
가입이나 설치 없이 바로 사용할 수 있습니다.
주요 사용 사례
- ›디자인 시스템에 넣을 transition timing function을 만듭니다.
- ›애니메이션 곡선을 시각적으로 확인하며 값을 조정합니다.
- ›CSS 코드와 cubic-bezier 값을 함께 복사합니다.