transition ease ease-in ease-out ease-in-out 무슨 차이일까

style.css

.box {
  transition: all 0.2s ease;
}

• 자연스러운 변화를 주기 위해서 사용하곤 했다
• ease는 여러 가지가 있는데 어떤 차이일까?

transition-timing-function

• 영상 편집할 때 영상의 앞뒤에 투명도를 가지고 페이드인 페이드아웃하는 그래프가 있는데 그거랑 똑같다
• ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier, steps 가 있다

함수들

• 캡처 ; https://cubic-bezier.com/

• ease ; 천천-빠름-천천
• linear ; 등속
• ease-in ; 천천-보통
• ease-out ; 보통-천천
• ease-in-out ; 천천-보통-천천
• cubic-bezier ; 커스텀

• steps ; 뚝뚝 끊어 보여준다

cubic-bezier

베지에 곡선이라고 한다
ease, in, in-out은 미리 정의어 있는 곡선이다
각각을 cubic-bezier로 표현하면 다음과 같다

• ease === cubic-bezier(0.25, 0.1, 0.25, 1.0)
• linear === cubic-bezier(0.0, 0.0, 1.0, 1.0)
• ease-in === cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out === cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out === cubic-bezier(0.42, 0, 0.58, 1.0)

참고

• https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
• https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function

유용한 도구

• cubic-bezier 커스텀
• https://cubic-bezier.com/

용어

• 베지에 곡선, 베지어 곡선
• https://ko.wikipedia.org/wiki/베지에_곡선