animation

animation

CSS3 vlastnot animation umožňuje všechny animační vlastnosti dát do jedné.

Příklad:

@keyframes zaver {
  0%   {left: 0px; background: rgba(255, 255, 0, 1);}
  50%  {left: 200px;}
  100% {left: 0px; background: rgba(255, 255, 0, 1);}
}
div:hover {
  position: relative;
  animation: zaver 2s ease-in 2 alternate 1s backwards;
}

Naštěstí jde dát většinu vlastností do jednoho zápisu animation.
Důležité je jen zachovat pořadí a jednu mezeru.
V případě, že nechcete nějakou vlastnost použít, jednoduše ji vynechte.