tapeta Moderního Webu

animation-timing-function

3D
2D

animation-timing-function

CSS3 vlastnot Animation-timing-function určí průběh animace.

Příklad:

    
@keyframes jmeno_animace {
  0%   {left: 0px;}
  50%  {left: 200px;}
  100% {left: 0px;}
}
div:hover {
  position: relative;
  animation-name: jmeno_animace;
  animation-duration: 2s;
  animation-timing-function: ease-in;   
}

Přibyla nám vlastnost animation-timing-function s hodnotou ease-in, což znamená spomalený rozjezd.

Seznam hodnot:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier

moderniweb.com © 2017