cubic-bezier()는 애니메이션이 가속하고 감속하는 방식을 정의하는 CSS 타이밍 함수입니다. 네 값(x1, y1, x2, y2)은 시간을 진행률에 매핑하는 곡선의 두 제어점입니다. X축은 시간(0~1), Y축은 애니메이션 진행률을 나타냅니다.
프리셋을 고르거나 캔버스의 주황색 제어점을 드래그해 이징 곡선을 만드세요. 움직이는 공이 타이밍 감각을 정확히 보여주고, CSS 출력은 어떤 transition이나 animation에도 바로 붙여 넣을 수 있습니다.
Frequently Asked Questions
Q: CSS에서 cubic-bezier란 무엇인가요?
CSS에서 cubic-bezier란 무엇인가요? transition과 animation에 사용되는 타이밍 함수로, 애니메이션이 시간에 따라 진행되는 속도 곡선을 정의합니다. 기본값은 cubic-bezier(0.25, 0.1, 0.25, 1)이며 ease라고도 합니다.
Q: 표준 이징 값은 무엇인가요?
표준 이징 값은 무엇인가요? ease = (0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), linear = (0, 0, 1, 1).
Q: 바운스 효과를 만들려면?
바운스 효과를 만들려면? Y 값을 1보다 크게 오버슈트하세요. 예: cubic-bezier(0.34, 1.56, 0.64, 1). 곡선이 잠시 목표를 넘었다가 돌아오는 스프링 같은 바운스가 됩니다.
Q: 음수 Y에서 애니메이션이 깨져 보이는 이유는?
음수 Y에서 애니메이션이 깨져 보이는 이유는? 음수 Y는 기대감(anticipation)을 만듭니다. 요소가 앞으로 가기 전에 뒤로 움직입니다. 백 이징에서는 의도적이지만 일반 콘텐츠 전환에는 어색해 보입니다.
Q: cubic-bezier를 애니메이션에 쓸 수 있나요?
cubic-bezier를 애니메이션에 쓸 수 있나요? 네. transition과 @keyframes 애니메이션 모두 timing-function 속성으로 사용할 수 있습니다. 스크롤 연동 애니메이션에도 적용됩니다.
한국 전통색·오방색
오방색은 한국 전통 색채 체계로, 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 가지 기본색이 방위와 계절을 상징합니다. 단청과 한복, 오방장두루마기에 사용되며, 현대 디자인에서도 전통미를 살리는 배색으로 활용됩니다.
청색 #3B5BA5동쪽과 봄을 상징하는 오방색의 파랑
적색 #C12127남쪽과 여름을 상징하는 강렬한 빨강
황색 #EAC102중앙과 대지를 상징하는 노랑
백색 #F5F5F5서쪽과 가을을 상징하는 순백
흑색 #17191C북쪽과 겨울을 상징하는 깊은 검정
쪽빛 #0067A3쪽풀로 물들인 전통 남색. 청바지의 원조
연두색 #81C147새싹의 연한 초록. 단청에 자주 쓰임
살구색 #F7CE68살구 열매를 닮은 부드러운 노란빛
자주색 #583B7E고귀함을 상징하는 전통 보라
단청색 #2E8B8B궁궐과 사찰 단청의 청록색
Q: 오방색이란 무엇인가요?
오방색이란 무엇인가요? 오방색은 한국 전통 색채 체계로 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 색이 방위와 계절을 상징합니다. 단청, 한복, 오방장두루마기에 사용됩니다.
Q: 단청에 쓰이는 색은 무엇인가요?
단청에 쓰이는 색은 무엇인가요? 단청은 궁궐과 사찰의 목조건축을 장식하는 채색 기법으로, 오방색을 기본으로 청록색(#2E8B8B)과 연두색(#81C147) 등을 조화롭게 사용합니다.