Egenskaben animation

Egenskaben animation er en sammentrækningsegenskab for animation, som giver mulighed for at indstille alle animationsegenskaber på én gang: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Rækkefølgen af værdier er ikke vigtig, varigheden af animationen animation-duration skal obligatorisk placeres før forsinkelsen animation-delay. De eneste obligatoriske egenskaber er animation-name og animation-duration.

Egenskaben kan også tage værdien none, som deaktiverer animationen helt. Denne værdi er standardværdien.

Syntaks

selector {
	animation: værdier;
}

Eksempel

I dette eksempel vil der være en forsinkelse på 3 sekunder (før hver ny afspilning), og derefter vil animationen afspilles i løbet af 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;
}

Eksempel . Mulige problemer

Animation skrevet i kort form kan mislykkes på grund af sit navn. Lad os overveje følgende animation:

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

Bemærk, at jeg bruger animationsnavnet reverse. Ved første øjekast ser alt godt ud, men animationen virker ikke, fordi reverse er et gyldigt nøgleord for egenskaben animation-direction.

Animationen vil heller ikke fungire, hvis der bruges andre nøgleord i navnet i kort form. Men alt fungerer godt, når man bruger "fuld" form for beskrivelse.

Blandt de nøgleordsværdier for animation-direction, der ødelægger animationer, er også nøgleordene relateret til easing-funktioner, samt infinite, alternate, running, paused og så videre.

Se også

kommandoen @keyframes,
der definerer nøglebillederne for animationen
glidende overgange transition, som repræsenterer en animation ved at hover over et element