Sifa animation

Sifa animation ni ufupisho wa sifa za animation, inakuwezesha kuweka sifa zote za animation kwa wakati mmoja: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Mpangilio wa maadili hauna maana, muda wa utekelezaji wa animation animation-duration lazima iwe kabla ya ucheleweshaji animation-delay. Sifa za lazima ni animation-name na animation-duration pekee.

Sifa inaweza pia kuchukua thamani none, ambayo huzima animation kabisa. Thamani hii ndiyo thamani chaguomsingi.

Kisarufi

kichaguli {
	animation: maadili;
}

Mfano

Katika mfano huu, kutakuwa na ucheleweshaji wa sekunde 3 kabla ya animation (kabla ya kila uchezaji mpya), kisha animation itachezwa kwa muda wa sekunde 6:

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

Mfano . Matatizo Yatakayowezekana

Animation iliyoandikwa kwa umbo fupi inaweza kutofanya kazi kwa sababu ya jina lake. Hebu tuchunguze animation ifuatayo:

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

Kumbuka, ninatumia jina la animation reverse. Kwa mtazamo wa kwanza, yote yako sawa, lakini animation haifanyi kazi, kwa sababu reverse ni neno msingi halali kwa sifa animation-direction.

Pia animation haitafanya kazi wakati ikitumika katika umbo fupi kwa jina la maneno mengine msingi. Lakini yote yanafanya kazi vyema wakati wa kutumia umbo "kamili" la maelezo.

Kwa maneno msingi-maadili ya animation-direction, yanaovunja animation, ni pamoja na maneno msingi yanayohusiana na vitendakazi vya laini, na pia infinite, alternate, running, paused na kadhalika.

Angalia Pia

amri @keyframes,
inayobainisha sura kuu za animation
mabadiliko laini transition, yanaowakilisha animation wakati wa kuweka kielekezi juu ya kipengele