Svojstvo animation

Svojstvo animation je skraćeni način za definisanje animacije, omogućava postavljanje svih svojstava animacije odjednom: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Redosled vrednosti nije bitan, vreme trajanja animacije animation-duration obavezno mora da stoji pre kašnjenja animation-delay. Obavezna su samo svojstva animation-name i animation-duration.

Svojstvo može takođe da prima vrednost none, koja potpuno isključuje animaciju. Ova vrednost je podrazumevana vrednost.

Sintaksa

cssselector {
  animation: vrednosti;
}

Primer

U ovom primeru će pre animacije postojati kašnjenje od 3 sekunde (pre svakog novog pokretanja), a zatim će se animacija izvršavati tokom 6 sekundi:

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 . Mogući problemi

Animacija, napisana u skraćenoj formi, može da ne radi zbog svog naziva. Hajde da razmotrimo sledeću animaciju:

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

Obratite pažnju, ja koristim naziv animacije reverse. Na prvi pogled, sve je u redu, ali animacija ne radi, jer je reverse validna ključna reč za svojstvo animation-direction.

Takođe animacija neće raditi kada se koristi u skraćenoj formi sa nazivima drugih ključnih reči. Ali sve dobro radi kada se koristi "puna" forma opisa.

Pored ključnih reči-vrednosti za animation-direction, koje lome animaciju, treba pomenuti i ključne reči koje se odnose na funkcije ublažavanja, kao i infinite, alternate, running, paused i tako dalje.

Pogledajte takođe