Egenskapen animation

Egenskapen animation er en samleegenskap for animasjon, som lar deg sette alle egenskaper for animasjon samtidig: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Rekkefølgen på verdiene spiller ingen rolle, varigheten av animasjonen animation-duration må nødvendigvis stå før forsinkelsen animation-delay. De eneste obligatoriske egenskapene er animation-name og animation-duration.

Egenskapen kan også ta verdien none, som deaktiverer animasjonen helt. Denne verdien er standardverdien.

Syntaks

velger {
	animation: verdier;
}

Eksempel

I dette eksemplet vil det være en forsinkelse på 3 sekunder (før hver ny avspilling), og deretter vil animasjonen spilles av i løpet av 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

Animasjon skrevet i kort form kan ikke fungere på grunn av sitt navn. La oss se på følgende animasjon:

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

Legg merke til at jeg bruker animasjonsnavnet reverse. Ved første øyekast ser alt bra ut, men animasjonen fungerer ikke, fordi reverse er et gyldig nøkkelord for egenskapen animation-direction.

Animasjonen vil heller ikke fungere ved bruk av kort form hvis navnet inneholder andre nøkkelord. Men alt fungerer bra ved bruk av "full" form for beskrivelse.

Blant nøkkelord-verdiene for animation-direction som ødelegger animasjoner, bør man også regne nøkkelord som tilhører overgangsfunksjoner, samt infinite, alternate, running, paused og så videre.

Se også

kommandoen @keyframes,
som definerer nøkkelrammene for animasjonen
glatte overganger transition, som representerer en animasjon ved å holde over elementet