[css] animation, transition 퍼블리싱 할 때 속도 속성, 속성값

[css]  animation, transition  퍼블리싱 할 때  속도 속성, 속성값

 

 transition-timing-function: 에 여러가지 속성값을 줄 수 있다. 

div {
  transition-timing-function: linear;
}

 

체감상 느낌을 표현해보면  

 

    1. ease :               빠른 느낌 ( slow fast slow)          cubic-bezier(0.25,0.1,0.25,1))

    2. ease-out:        마지막이 느리다.   ease 느낌        cubic-bezier(0,0,0.58,1))
    3. linear:              등속                                                     cubic-bezier(0,0,1,1)
    4. ease-in-out:  처음과 마지막이 느리다.   약간 등속느낌  cubic-bezier(0.42,0,0.58,1)
    5. ease-in:           처음이 느리다.  느린 느낌  (cubic-bezier(0.42,0,1,1)) cubic-bezier(0.42,0,1,1)

 

 

등속을 기준으로 봤을 때. 

in이 붙으면 체감상 동작이 가장 느린 느낌이 있다. 

처음에 늦게 출발하다보니.. 마지막까지 느리게 도착하는 경향이 있다.