Eienskap animation-direction

Die eienskap animation-direction spesifiseer die rigting van die animasie. By verstek sal die animasie slegs 1 keer herhaal en dan terugkeer na die oorspronklike toestand, daarna, indien 'n vertraging animation-delay gespesifiseer is, wag dit die gespesifiseerde tyd en dan begin die siklus van voor af.

Hierdie eienskap laat jou toe om hierdie gedrag te verander, bv. sodat die animasie aan die einde bly waar dit geëindig het, en nie na die beginposisie terugspring nie.

Jy kan ook die volgende gedrag spesifiseer: die animasie gaan na die uiterste punt en keer dan terug (soos in transition). Sien die beskrywing hieronder.

Sintaksis

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

Waardes

Waarde	Beskrywing
`reverse`	Die animasie sal in die omgekeerde rigting speel.
`alternate`	Die animasie speel eers in die voorwaartse rigting, en dan in die omgekeerde rigting (soos transition).
`alternate-reverse`	Die animasie speel van die eindposisie na die beginposisie en terug. In wese is dit die waardes `alternate` en `reverse` in een.
`normal`	Die animasie speel van begin tot einde, en na voltooiing spring dit skielik terug na die beginposisie.

Standaardwaarde: normal.

Voorbeeld

Nou sal die element in een rigting beweeg, en dan terugkeer, aangesien die waarde alternate gespesifiseer is. Hier het animation-duration 'n waarde van 3 sekondes en dit beteken dat die beweging "heen" en "terug" elk 3 sekondes sal duur:

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

Результат:

Voorbeeld

Nou sal die element in die omgekeerde rigting beweeg (moet van links na regs, maar sal van regs na links):

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

Результат:

Voorbeeld

Nou sal die element heen en weer beweeg, maar in die omgekeerde rigting (moet van links begin, maar sal van regs begin):

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

Результат:

Sien ook

die eienskap animation-name,
wat die naam van die animasie spesifiseer
die eienskap animation-duration,
wat die duur van die animasie spesifiseer
die eienskap animation-delay,
wat die vertraging voor die animasie spesifiseer
die eienskap animation-timing-function,
wat die spoed van die animasie spesifiseer
die eienskap animation-iteration-count,
wat die aantal iterasies van die animasie spesifiseer
die eienskap animation-fill-mode,
wat die toestand van die animasie spesifiseer
die eienskap animation-play-state,
wat jou toelaat om die animasie te pauzeer
die eienskap animation,
wat 'n kortnotasie vir animasies is
die opdrag @keyframes,
wat die sleutelframe van die animasie spesifiseer
gladde oorgange transition, wat 'n animasie is wanneer daar oor 'n element beweeg word