Egenskaben animation-direction

Egenskaben animation-direction angiver animationsretningen. Som standard gentages animationen kun 1 gang og vender derefter tilbage til udgangstilstanden, herefter, hvis der er angivet en forsinkelse animation-delay, venter den den angivne tid, og derefter starter cyklussen forfra.

Denne egenskab gør det muligt at ændre denne adfærd, for eksempel sådan at animationen efter afslutningen forbliver der, hvor den sluttede, i stedet for at springe tilbage til startpositionen.

Det er også muligt at angive sådan en adfærd: animationen når til yderpunktet og vender tilbage (som i transition). Se beskrivelsen nedenfor.

Syntaks

cssselektor {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

Værdier

Standardværdi: normal.

Eksempel

Nu vil elementet bevæge sig i den ene retning, og derefter vende tilbage, da der er angivet værdien alternate. Samtidig har animation-duration værdien 3 sekunder, hvilket betyder, at bevægelserne "derhen" og "tilbage" vil vare 3 sekunder hver:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-direction: alternate;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Eksempel

Nu vil elementet bevæge sig i den modsatte retning (skulle fra venstre mod højre, men vil fra højre mod venstre):

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}
      
#elem {
  animation-direction: reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Eksempel

Nu vil elementet bevæge sig frem og tilbage, men i omvendt retning (skulle starte til venstre, men vil starte til højre):

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-direction: alternate-reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Se også