Vlastnosť animation-duration

Vlastnosť animation-duration nastavuje čas trvania animácie.

Syntax

selektor {
	animation-duration: čas v s alebo ms;
}

Hodnoty

Hodnota	Popis
`s`	Nastavuje čas v sekundách (napríklad `3s`).
`ms`	Nastavuje čas v milisekundách (napríklad `3ms`). Jedna sekunda je `1000` milisekúnd.

Predvolená hodnota: 0s.

Príklad

V tomto príklade sa animácia bude prehrávať počas 3 sekúnd:

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

Pozri tiež

vlastnosť animation-name,
ktorá nastavuje názov animácie
vlastnosť animation-delay,
ktorá nastavuje oneskorenie pred vykonaním animácie
vlastnosť animation-timing-function,
ktorá nastavuje rýchlosť vykonávania animácie
vlastnosť animation-iteration-count,
ktorá nastavuje počet opakovaní animácie
vlastnosť animation-direction,
ktorá nastavuje smer animácie
vlastnosť animation-fill-mode,
ktorá nastavuje stav animácie
vlastnosť animation-play-state,
ktorá umožňuje pozastaviť animáciu
vlastnosť animation,
ktorá je skráteným zápisom pre animácie
príkaz @keyframes,
ktorý nastavuje kľúčové fázy animácie
plynulé prechody transition, ktoré predstavujú animáciu pri prejdení myšou nad prvok