Egenskapen animation-duration

Egenskapen animation-duration ställer in tiden för animeringens utförande.

Syntax

selektor {
	animation-duration: tid i s eller ms;
}

Värden

Värde	Beskrivning
`s`	Anger tid i sekunder (till exempel `3s`).
`ms`	Anger tid i millisekunder (till exempel `3ms`). En sekund är `1000` millisekunder.

Standardvärde: 0s.

Exempel

I detta exempel kommer animeringen att spelas upp under 3 sekunder:

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

Se även

egenskapen animation-name,
som anger animationens namn
egenskapen animation-delay,
som anger fördröjning före animeringens utförande
egenskapen animation-timing-function,
som anger hastigheten för animeringens utförande
egenskapen animation-iteration-count,
som anger antalet iterationer av animeringen
egenskapen animation-direction,
som anger animeringens riktning
egenskapen animation-fill-mode,
som anger animeringens tillstånd
egenskapen animation-play-state,
som möjliggör att pausa animeringen
egenskapen animation,
som är en förkortning för animationer
kommandot @keyframes,
som anger animationens nyckelrutor
mjuka övergångar transition, som är animationer vid hovring över ett element