Question 1

CSS에서 cubic-bezier란 무엇인가요?

Accepted Answer

CSS에서 cubic-bezier란 무엇인가요? transition과 animation에 사용되는 타이밍 함수로, 애니메이션이 시간에 따라 진행되는 속도 곡선을 정의합니다. 기본값은 cubic-bezier(0.25, 0.1, 0.25, 1)이며 ease라고도 합니다.

Question 2

표준 이징 값은 무엇인가요?

Accepted Answer

표준 이징 값은 무엇인가요? 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).

Question 3

바운스 효과를 만들려면?

Accepted Answer

바운스 효과를 만들려면? Y 값을 1보다 크게 오버슈트하세요. 예: cubic-bezier(0.34, 1.56, 0.64, 1). 곡선이 잠시 목표를 넘었다가 돌아오는 스프링 같은 바운스가 됩니다.

Question 4

음수 Y에서 애니메이션이 깨져 보이는 이유는?

Accepted Answer

음수 Y에서 애니메이션이 깨져 보이는 이유는? 음수 Y는 기대감(anticipation)을 만듭니다. 요소가 앞으로 가기 전에 뒤로 움직입니다. 백 이징에서는 의도적이지만 일반 콘텐츠 전환에는 어색해 보입니다.

Question 5

cubic-bezier를 애니메이션에 쓸 수 있나요?

Accepted Answer

cubic-bezier를 애니메이션에 쓸 수 있나요? 네. transition과 @keyframes 애니메이션 모두 timing-function 속성으로 사용할 수 있습니다. 스크롤 연동 애니메이션에도 적용됩니다.

큐빅 베지어 생성기

📈 큐빅 베지어 생성기

큐빅 베지어 가이드

Pro Tips

Frequently Asked Questions

한국 전통색·오방색