Właściwość animation-direction

Właściwość animation-direction określa kierunek animacji. Domyślnie animacja powtórzy się tylko 1 raz, a następnie wróci do stanu początkowego, potem, jeśli ustawiono opóźnienie animation-delay, będzie czekać przez określony czas, a następnie cykl rozpocznie się od nowa.

Ta właściwość pozwala zmienić to zachowanie, na przykład tak, aby animacja po zakończeniu pozostała w miejscu, w którym się zakończyła, a nie przeskakiwała z powrotem do pozycji początkowej.

Można również ustawić takie zachowanie: animacja dotrze do punktu krańcowego i wróci z powrotem (tak jak w transition). Zobacz opis poniżej.

Składnia

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

Wartości

Wartość domyślna: normal.

Przykład

Teraz element będzie poruszał się w jedną stronę, a potem wracał z powrotem, ponieważ ustawiono wartość alternate. Przy czym animation-duration ma wartość 3 sekund, co oznacza, że przejścia "tam" i "z powrotem" będą trwać po 3 sekundy:

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

Результат:

Przykład

Teraz element będzie poruszał się w odwrotnym kierunku (powinien od lewej do prawej, a będzie od prawej do lewej):

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

Результат:

Przykład

Teraz element będzie poruszał się tam i z powrotem, ale w odwrotnym kierunku (powinien zaczynać z lewej, a będzie zaczynał z prawej):

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

Результат:

Zobacz też