Egenskapen animation

Egenskapen animation är en sammansatt egenskap för animation, som gör det möjligt att ställa in alla animationsegenskaper samtidigt: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Ordningen på värdena spelar ingen roll, förutom att animationens varaktighet animation-duration måste stå före fördröjningen animation-delay. Endast egenskaperna animation-name och animation-duration är obligatoriska.

Egenskapen kan också ta värdet none, som stänger av animationen helt. Detta värde är standardvärdet.

Syntax

selector {
	animation: värden;
}

Exempel

I detta exempel kommer det att finnas en fördröjning på 3 sekunder (före varje ny uppspelning), varefter animationen kommer att spelas upp under 6 sekunder:

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

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

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exempel . Möjliga problem

En animation skriven i kortform kan sluta fungera på grund av sitt namn. Låt oss betrakta följande animation:

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

Lägg märke till att jag använder animationens namn reverse. Vid första anblicken verkar allt bra, men animationen fungerar inte, eftersom reverse är ett giltigt nyckelord för egenskapen animation-direction.

Animationen kommer inte heller att fungera om man använder andra nyckelord i namnet i kortformen. Men allt fungerar bra när man använder den "fullständiga" formen för beskrivning.

Förutom nyckelordsvärdena för animation-direction som bryter animationer, kan man även nämna nyckelord relaterade till easing-funktioner, samt infinite, alternate, running, paused och så vidare.

Se även

kommandot @keyframes,
som definierar nyckelramar för animationen
mjuka övergångar transition, som representerar en animation vid hovring över ett element