Egenskapen animation-delay

Egenskapen animation-delay sätter en fördröjning innan animationen startar.

Syntax

selektor {
	animation-delay: 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 det att finnas en fördröjning på 3 sekunder innan animationen startar:

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

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

#elem {
	animation-delay: 3s;
	animation-duration: 6s;
	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-duration,
som anger animationens varaktighet
egenskapen animation-timing-function,
som anger animationens hastighet
egenskapen animation-iteration-count,
som anger antalet iterationer av animationen
egenskapen animation-direction,
som anger animationens riktning
egenskapen animation-fill-mode,
som anger animationens tillstånd
egenskapen animation-play-state,
som möjliggör att pausa animationen
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