Vlastnosť animation

Vlastnosť animation je skrátená vlastnosť pre animáciu, umožňuje nastaviť všetky vlastnosti pre animáciu naraz: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Poradie hodnoty nemá význam, čas vykonania animácie animation-duration musí nevyhnutne stáť pred oneskorením animation-delay. Povinnými sú len vlastnosti animation-name a animation-duration.

Vlastnosť môže tiež nadobúdať hodnotu none, ktorá úplne vypína animáciu. Táto hodnota je predvolenou hodnotou.

Syntax

cssselektor {
  animation: hodnoty;
}

Príklad

V tomto príklade bude pred animáciou oneskorenie 3 sekundy (pred každým novým prehrávaním), a potom sa animácia bude prehrávať počas 6 sekúnd:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: move 6s infinite 3s linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Príklad . Možné problémy

Animácia zapísaná v krátkej forme môže nefungovať kvôli svojmu názvu. Pozrime sa na nasledujúcu animáciu:

css@keyframes reverse {
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}

Všimnite si, používam názov animácie reverse. Na prvý pohľad je všetko v poriadku, ale animácia nefunguje, pretože reverse je platné kľúčové slovo pre vlastnosť animation-direction.

Tiež animácia nebude fungovať pri použití v krátkej forme v názve iných kľúčových slov. Ale všetko funguje dobre pri použití "úplnej" formy opisu.

Medzi kľúčové slová-hodnoty animation-direction, ktoré kazia animácie, patria aj kľúčové slová týkajúce sa funkcií vyhladenia, a tiež infinite, alternate, running, paused a tak ďalej.

Pozri tiež