Egenskaben animation

Egenskaben animation er en sammentrækningsegenskab for animation, som giver mulighed for at indstille alle animationsegenskaber på én gang: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Rækkefølgen af værdier er ikke vigtig, varigheden af animationen animation-duration skal obligatorisk placeres før forsinkelsen animation-delay. De eneste obligatoriske egenskaber er animation-name og animation-duration.

Egenskaben kan også tage værdien none, som deaktiverer animationen helt. Denne værdi er standardværdien.

Syntaks

cssselector {
  animation: værdier;
}

Eksempel

I dette eksempel vil der være en forsinkelse på 3 sekunder (før hver ny afspilning), og derefter vil animationen afspilles i løbet af 6 sekunder:

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

Результат:

Eksempel . Mulige problemer

Animation skrevet i kort form kan mislykkes på grund af sit navn. Lad os overveje følgende animation:

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

Bemærk, at jeg bruger animationsnavnet reverse. Ved første øjekast ser alt godt ud, men animationen virker ikke, fordi reverse er et gyldigt nøgleord for egenskaben animation-direction.

Animationen vil heller ikke fungire, hvis der bruges andre nøgleord i navnet i kort form. Men alt fungerer godt, når man bruger "fuld" form for beskrivelse.

Blandt de nøgleordsværdier for animation-direction, der ødelægger animationer, er også nøgleordene relateret til easing-funktioner, samt infinite, alternate, running, paused og så videre.

Se også