animation Eienskap

Die animation eienskap is 'n verkorte eienskap vir animasies, dit laat jou toe om alle animasie-eienskappe gelyktydig te stel: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Die volgorde van waardes maak nie saak nie, die animasie se uitvoeringstyd animation-duration moet noodwendig voor die vertraging animation-delay verskyn. Slegs die eienskappe animation-name en animation-duration is verpligtend.

Die eienskap kan ook die waarde none aanneem, wat die animasie heeltemal afskakel. Hierdie waarde is die verstekwaarde.

Sintaksis

selektor {
	animation: waardes;
}

Voorbeeld

In hierdie voorbeeld sal daar 'n vertraging van 3 sekondes wees voor die animasie (voor elke nuwe afspeling), en dan sal die animasie vir 6 sekondes speel:

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

Voorbeeld . Moontlike probleme

'n Animasie wat in verkorte vorm geskryf is, kan moontlik nie werk as gevolg van sy naam nie. Kom ons kyk na die volgende animasie:

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

Let daarop, ek gebruik die animasienaam reverse. Op die oog af lyk alles goed, maar die animasie werk nie, want reverse is 'n geldige sleutelwoord vir die animation-direction eienskap.

Die animasie sal ook nie werk as ander sleutelwoorde vir die naam in die verkorte vorm gebruik word nie. Maar alles werk goed as die "volle" beskrywingsvorm gebruik word.

Die sleutelwoord-waardes vir animation-direction, wat animasies breek, sluit ook die sleutelwoorde in wat verband hou met tempofunksies, sowel as infinite, alternate, running, paused, ensovoorts.

Sien ook

die @keyframes opdrag,
wat die sleutelframe van die animasie stel
gladde oorgange transition, wat animasies is wanneer daar op 'n element gehover word