Az animation tulajdonság

Az animation tulajdonság egy animációs rövidítő tulajdonság, amely lehetővé teszi az összes animációs tulajdonság egyidejű megadását: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Az értékek sorrendje nem számít, az animáció lejátszási idejének animation-duration kötelezően a késleltetés animation-delay előtt kell állnia. Csak az animation-name és a animation-duration tulajdonságok kötelezőek.

A tulajdonság felveheti a none értéket is, ami teljesen kikapcsolja az animációt. Ez az érték az alapértelmezett.

Szintaxis

cssselector {
  animation: értékek;
}

Példa

Ebben a példában az animáció előtt 3 másodperc késleltetés lesz (minden új lejátszás előtt), majd az animáció 6 másodpercig fog lejátszódni:

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

Результат:

Példa . Lehetséges problémák

A rövid formában írt animáció esetleg nem működhet a neve miatt. Nézzük meg a következő animációt:

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

Figyeljük meg, hogy az animáció reverse nevet használja. Első pillantásra minden rendben van, de az animáció nem működik, mivel a reverse egy érvényes kulcsszó az animation-direction tulajdonsághoz.

Az animáció szintén nem fog működni, ha a rövid formában más kulcsszavakat használunk a névben. De minden jól működik a "teljes" leíró forma használatakor.

Az animation-direction tulajdonság értékeiként szolgáló, az animációkat tönkretevő kulcsszavak közé tartoznak az simítási függvényekre vonatkozó kulcsszavak, valamint a infinite, alternate, running, paused, stb.

Lásd még