Właściwość animation

Właściwość animation - to właściwość skrótowa dla animacji, pozwala ustawić wszystkie właściwości dla animacji jednocześnie: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Kolejność wartości nie ma znaczenia, czas trwania animacji animation-duration koniecznie musi stać przed opóźnieniem animation-delay. Obowiązkowe są tylko właściwości animation-name i animation-duration.

Właściwość może również przyjmować wartość none, która całkowicie wyłącza animację. Ta wartość jest wartością domyślną.

Składnia

cssselektor {
  animation: wartości;
}

Przykład

W tym przykładzie przed animacją będzie opóźnienie 3 sekund (przed każdym nowym odtworzeniem), a następnie animacja będzie odtwarzana przez 6 sekund:

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

Результат:

Przykład . Możliwe problemy

Animacja zapisana w formie skrótowej może nie działać z powodu swojej nazwy. Przyjrzyjmy się następującej animacji:

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

Zauważ, używam nazwy animacji reverse. Na pierwszy rzut oka, wszystko w porządku, ale animacja nie działa, ponieważ reverse - prawidłowe słowo kluczowe dla właściwości animation-direction.

Również animacja nie będzie działać przy użyciu w formie skrótowej w nazwie innych słów kluczowych. Ale wszystko działa dobrze przy użyciu "pełnej" formy opisu.

Do słów kluczowych-wartości animation-direction, psującymi animacje, warto zaliczyć i słowa kluczowe, odnoszące się do funkcji wygładzania, a także infinite, alternate, running, paused i tak dalej.

Zobacz też