Īpašība animation

Īpašība animation ir īpašību saīsinājums animācijai, kas ļauj iestatīt visas animācijas īpašības vienlaicīgi: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Vērtību secībai nav nozīmes, animācijas izpildes laiks animation-duration obligāti jānovieto pirms aizkaves animation-delay. Obligātas ir tikai īpašības animation-name un animation-duration.

Īpašība var arī pieņemt vērtību none, kas pilnībā atslēdz animāciju. Šī vērtība ir noklusējuma vērtība.

Sintakse

selector {
	animation: vērtības;
}

Piemērs

Šajā piemērā pirms animācijas būs aizkave 3 sekundes (pirms katras jaunas atskaņošanas), un pēc tam animācija tiks atskaņota 6 sekundes:

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

Piemērs . Iespējamās problēmas

Animācija, kas ierakstīta īsajā formā, var nedarboties savas nosaukuma dēļ. Apskatīsim šādu animāciju:

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

Ievērojiet, es izmantoju animācijas nosaukumu reverse. No pirmā acu uzmetiena, viss ir labi, bet animācija nedarbojas, jo reverse ir derīgs atslēgvārds īpašībai animation-direction.

Arī animācija nedarbosies, ja īsajā formā tiks izmantoti citi atslēgvārdi nosaukumā. Bet viss labi darbojas, izmantojot "pilno" apraksta formu.

Pie atslēgvārdiem-vērtībām animation-direction, kas salauž animācijas, vajadzētu pieskaitīt arī atslēgvārdus, kas attiecas uz gludināšanas funkcijām, kā arī infinite, alternate, running, paused un tā tālāk.

Skatiet arī

komandu @keyframes,
kas nosaka animācijas galvenos kadrus
gludās pārejas transition, kas ir animācija, kad kursors tiek novietots virs elementa