CSS

transition timing function css

/*increase speed toward middle then slow to end */
animation-timing-function: ease; 

/*start slow increase speed till end*/
/*You should use this ease when an object is outgoing.*/
animation-timing-function: ease-in;

/*start quick decrease speed till end*/
/*You should use this ease when an object is incoming.*/
animation-timing-function: ease-out;

/*start slow, speeding up, decrease speed till end*/
animation-timing-function: ease-in-out;

/*animates at an even speed.*/
animation-timing-function: linear;

better transition timing functions

.btn {
  /* ease-out */
  transition-timing-function:
    cubic-bezier(0.215, 0.61, 0.355, 1);
  /* ease-in */
  transition-timing-function:
    cubic-bezier(0.75, 0, 1, 1);
  /* ease-in-out */
  transition-timing-function:
    cubic-bezier(0.645, 0.045, 0.355, 1);
  /* ease */
  transition-timing-function:
    cubic-bezier(0.44, 0.21, 0, 1);
}