Eienskap animation-duration

Die eienskap animation-duration stel die uitvoeringstyd van 'n animasie vas.

Sintaksis

selektor {
	animation-duration: tyd in s of ms;
}

Waardes

Waarde	Beskrywing
`s`	Stel tyd in sekondes vas (byvoorbeeld `3s`).
`ms`	Stel tyd in millisekondes vas (byvoorbeeld `3ms`). Een sekonde is `1000` millisekondes.

Standaardwaarde: 0s.

Voorbeeld

In hierdie voorbeeld sal die animasie afspeel vir 'n tydsduur van 3 sekondes:

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

Sien ook

die eienskap animation-name,
wat die naam van die animasie spesifiseer
die eienskap animation-delay,
wat die vertraging voor animasie-uitvoering spesifiseer
die eienskap animation-timing-function,
wat die spoed van animasie-uitvoering spesifiseer
die eienskap animation-iteration-count,
wat die aantal animasie-herhalings spesifiseer
die eienskap animation-direction,
wat die rigting van die animasie spesifiseer
die eienskap animation-fill-mode,
wat die toestand van die animasie spesifiseer
die eienskap animation-play-state,
wat toelaat om die animasie te pauseer
die eienskap animation,
wat 'n kort vorm is om animasies te spesifiseer
die bevel @keyframes,
wat die sleutelframe van die animasie spesifiseer
gladie oorvloeie transition, wat 'n animasie verteenwoordig wanneer daar oor 'n element gesweef word