Savybė animation

Savybė animation - yra animacijos savybė santrumpa, leidžia nustatyti visas animacijos savybes vienu metu: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Reikšmių tvarka neturi reikšmės, animacijos vykdymo laikas animation-duration būtinai turi būti prieš delsą animation-delay. Privalomos yra tik savybės animation-name ir animation-duration.

Savybė taip pat gali priimti reikšmę none, kuri visiškai išjungia animaciją. Ši reikšmė yra numatytoji reikšmė.

Sintaksė

cssselektorius {
  animation: reikšmės;
}

Pavyzdys

Šiame pavyzdyje prieš animaciją bus delsa 3 sekundes (prieš kiekvieną naują leidimą), o tada animacija bus leidžiama per 6 sekundes:

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

Результат:

Pavyzdys . Galimos problemos

Animacija, užrašyta trumpa forma, gali neveikti dėl savo pavadinimo. Pažiūrėkime į šią animaciją:

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

Atkreipkite dėmesį, aš naudoju animacijos pavadinimą reverse. Iš pirmo žvilgsnio, viskas gerai, bet animacija neveikia, nes reverse - galiojantis raktinis žodis savybei animation-direction.

Taip pat animacija neveiks naudojant trumpą formą pavadinime kitų raktinių žodžių. Bet viskas veikia gerai naudojant "pilną" formos aprašymą.

Prie raktinių žodžių-reikšmių animation-direction, gadinančių animacijas, vertėtų priskirti ir raktinius žodžius, susijusius su sklandymo funkcijomis, taip pat infinite, alternate, running, paused ir taip toliau.

Taip pat žiūrėkite