Lastnost animation

Lastnost animation je okrajšava za animacijo, ki omogoča nastavitev vseh lastnosti za animacijo hkrati: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Vrstni red vrednosti ni pomemben, čas trajanja animacije animation-duration mora nujno stati pred zamiko animation-delay. Obvezni sta samo lastnosti animation-name in animation-duration.

Lastnost lahko sprejme tudi vrednost none, ki popolnoma onemogoči animacijo. Ta vrednost je privzeta.

Sintaksa

cssselektor {
  animation: vrednosti;
}

Primer

V tem primeru bo pred animacijo zamika v 3 sekundah (pred vsakim novim predvajanjem), nato pa se bo animacija predvajala 6 sekund:

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;
}

Результат:

Primer . Možne težave

Animacija, zapisana v kratki obliki, morda ne deluje zaradi svojega imena. Oglejmo si naslednjo animacijo:

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

Upoštevajte, da uporabljam ime animacije reverse. Na prvi pogled je vse v redu, vendar animacija ne deluje, ker je reverse veljavna ključna beseda za lastnost animation-direction.

Prav tako animacija ne bo delovala, če v kratki obliki uporabimo druge ključne besede v imenu. Vendar vse dobro deluje pri uporabi "polne" oblike opisa.

Med ključne besede-vrednosti animation-direction, ki lomijo animacije, spadajo tudi ključne besede, ki se nanašajo na funkcije glajenja, kot tudi infinite, alternate, running, paused in tako naprej.

Glej tudi