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

selektor {
	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:

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

@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:

@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ż

regułę @keyframes,
ustawiającą klatki kluczowe animacji
płynne przejścia transition, reprezentujące animację po najechaniu na element