Cubic Bezier 가속 곡선 생성기
CSS용 cubic-bezier 가속 곡선을 만듭니다. 표준 사전 설정이 포함되어 있습니다.
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Cubic Bezier 곡선 생성기란 무엇인가요?
CSS 애니메이션은 가속(easing) 함수를 사용하여 값이 시간에 따라 어떻게 변하는지 제어합니다. cubic-bezier의 네 가지 매개변수는 (0,0)에서 (1,1)까지의 곡선을 정의합니다. 곡선이 가파를수록 해당 구간에서 애니메이션이 빨라집니다. 일반적인 사전 설정은 대부분의 요구 사항을 충족하며, 사용자 정의 곡선은 독특한 움직임을 만들어냅니다.
자주 묻는 질문
ease와 ease-in의 차이는 무엇인가요?▼
ease는 가속한 후 감속합니다. ease-in은 가속만 합니다. ease-out은 감속만 합니다. ease-in-out은 두 가지를 모두, 더 뚜렷하게 수행합니다.
사용자 정의 곡선은 언제 사용해야 하나요?▼
표준 가속이 너무 평범하게 느껴질 때 사용합니다. 미묘한 사용자 정의 곡선은 브랜드 고유의 움직임 정체성을 만들어냅니다.
관련 도구
색상 변환기 (HEX/RGB/HSL)
HEX, RGB, HSL 형식 간에 색상을 변환합니다. 색상을 시각적으로 선택하거나 값을 직접 입력하세요.
CSS Box Shadow 생성기
CSS box-shadow 값을 시각적으로 만듭니다. 실시간으로 미리 보고 생성된 CSS를 복사하세요.
CSS 그라데이션 생성기
선형 및 방사형 CSS 그라데이션을 만듭니다. 색상을 시각적으로 선택하고 생성된 CSS를 복사하세요.
색상 팔레트 생성기
임의의 기준 색상에서 조화로운 색상 팔레트를 생성합니다. 보색, 유사색, 삼색조, 단색 배색을 지원합니다.
CSS Border Radius 생성기
복잡한 CSS border-radius 값을 시각적으로 만듭니다. 각 모서리를 독립적으로 제어합니다.
CSS Clamp() 생성기
clamp()로 유동적이고 반응형인 CSS 값을 생성합니다. 뷰포트 범위에 걸쳐 최소 크기와 최대 크기 사이를 부드럽게 조정합니다.