transition-timing-function 속성

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://chinsun9.github.io/2021/06/18/transition-timing-function/