Animation касиети

animation касиети - бул анимация үчүн кыскартылган касиет, анимациянын бардык касиеттерин бир эле учурда белгилөөгө мүмкүндүк берет: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Маанилердин иреттүүлүгү мааниге ээ эмес, анимациянын аткаруу убактысы animation-duration милдеттүү түрдө кечигүү animation-delay-дан мурун турушу керек. Мильдеттүү болуп эле animation-name жана animation-duration касиеттери гана саналат.

Касиет ошондой эле none маанисин кабыл ала алат, бул анимацияны толугу менен өчүрөт. Бул маани демейки маани болуп саналат.

Синтаксис

селектор {
	animation: маанилер;
}

Мисал

Бул мисалда анимацияга 3 секунд кечигүү болот (ар бир жаңы ойнотулгандан мурун), андан кийин анимация 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;
}

Мисал . Мүмкүн болгон көйгөйлөр

Кыска формада жазылган анимация өзүнүн атына байланыштуу иштебей калышы мүмкүн. Төмөнкү анимацияны карап көрөлү:

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

Эскертип коёюн, мен анимациянын атын reverse колдонуп жатам. Биринчи караганда, баары жакшы, бирок анимация иштей албайт, себеби reverse - animation-direction касиети үчүн жарактуу ачкыч сөз.

Ошондой эле анимация кыска формада колдонгондо аталышында башка ачкыч сөздөр болсо да иштебей калышы мүмкүн. Бирок "толук" формасын колдонгондо баары жакшы иштейт.

animation-direction касиетине таандык ачкыч сөз-маанилерге, анимацияларды буза тургандарга, тегиздөө функцияларына тиешелүү ачкыч сөздөр, ошондой эле infinite, alternate, running, paused жана ушу сыяктууларды кошуу керек.

Ошондой эле караңыз

@keyframes командасы,
анимациянын ачкыч кадрларын белгилейт
transition жумшак өтүүлөр, элементтин үстүнө көз салуу менен анимацияны көрсөтөт