Animation-ominaisuus

Ominaisuus animation on lyhenne animaatio-ominaisuuksille, jonka avulla voit määrittää kaikki animaatio-ominaisuudet kerralla: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Arvojen järjestyksellä ei ole väliä, animaation keston animation-duration on oltava pakosti viiveen animation-delay edellä. Vain ominaisuudet animation-name ja animation-duration ovat pakollisia.

Ominaisuus voi myös saada arvon none, joka poistaa animaation kokonaan. Tämä arvo on oletusarvo.

Syntaksi

cssvalitsija {
  animation: arvot;
}

Esimerkki

Tässä esimerkissä animaatiolla on 3 sekunnin viive (ennen jokaista uutta toistokertaa), minkä jälkeen animaatio toistuu 6 sekunnin ajan:

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

Результат:

Esimerkki . Mahdolliset ongelmat

Lyhyessä muodossa kirjoitettu animaatio voi olla toimimatta nimensä vuoksi. Tarkastellaan seuraavaa animaatiota:

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

Huomaa, että käytän animaation nimenä reverse. Ensi silmäyksellä kaikki näyttää hyvältä, mutta animaatio ei toimi, koska reverse on kelvollinen avainsana ominaisuudelle animation-direction.

Myöskään animaatio ei toimi, jos lyhyttä muotoa käytettäessä nimessä on muita avainsanoja. Mutta kaikki toimii hyvin, kun käytetään "täydellistä" kuvaustapaa.

Avainsanoihin, jotka rikkovat animaatiot, kuuluvat animation-direction -ominaisuuden avainsanat, sekä liukufunktioiden liittyvät avainsanat, sekä infinite, alternate, running, paused ja niin edelleen.

Katso myös