transition

płynne przejście jednej wartości css do drugiej.

  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;

parametry przejścia:

  • ease – powolny początek, przyspieszony środek, powolny koniec / default/
  • linear – ta sama prędkość od początku do końca
  • ease-in – powolny początek przejścia
  • ease-out – powolny koniec przejścia
  • ease-in-out – powolny początek i koniec przejścia
  • cubic-bezier(n,n,n,n) – pozwala zdefiniować własne paramwtry przejścią w  funkcji cubic-bezier

transition: width 2s, height 2s, background-color 2s, transform 2s;

transition-property

transition-property:width, background-color;
transition-duration:1s, 3s;
transition-timing-function:linear, ease-in;
transition-delay:3s, 0s;