animation-timing-function

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