Proprietatea animation-duration

Proprietatea animation-duration stabilește durata de execuție a animației.

Sintaxă

selector {
	animation-duration: timp în s sau ms;
}

Valori

Valoare	Descriere
`s`	Stabilește timpul în secunde (de exemplu `3s`).
`ms`	Stabilește timpul în milisecunde (de exemplu `3ms`). O secundă este `1000` de milisecunde.

Valoare implicită: 0s.

Exemplu

În acest exemplu, animația va fi redată timp de 3 secunde:

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

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

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

Vezi și

proprietatea animation-name,
care stabilește numele animației
proprietatea animation-delay,
care stabilește întârzierea înainte de executarea animației
proprietatea animation-timing-function,
care stabilește viteza de execuție a animației
proprietatea animation-iteration-count,
care stabilește numărul de iterații ale animației
proprietatea animation-direction,
care stabilește direcția animației
proprietatea animation-fill-mode,
care stabilește starea animației
proprietatea animation-play-state,
care permite punerea animației pe pauză
proprietatea animation,
reprezentând o prescurtare pentru animații
comanda @keyframes,
care stabilește cadrele cheie ale animației
tranzițiile line transition, reprezentând o animație la trecerea cursorului peste element