Animation-duration қасиеті

animation-duration қасиеті анимацияның орындалу уақытын белгілейді.

Синтаксис

селектор {
	animation-duration: уақыт s немесе ms-те;
}

Мәндері

Мәні	Сипаттама
`s`	Уақытты секундпен белгілейді (мысалы `3s`).
`ms`	Уақытты миллисекундпен белгілейді (мысалы `3ms`). Бір секунд - бұл `1000` миллисекунд.

Әдепкі мәні: 0s.

Мысал

Бұл мысалда анимация 3 секунд бойы орындалады:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Сондай-ақ қараңыз

animation-name қасиеті,
анимация атауын белгілейді
animation-delay қасиеті,
анимацияны бастамас бұрын кідіртуді белгілейді
animation-timing-function қасиеті,
анимацияның орындалу жылдамдығын белгілейді
animation-iteration-count қасиеті,
анимация қайталану санын белгілейді
animation-direction қасиеті,
анимация бағытын белгілейді
animation-fill-mode қасиеті,
анимация күйін белгілейді
animation-play-state қасиеті,
анимацияны кідіртуге мүмкіндік береді
animation қасиеті,
анимациялар үшін қысқартылған жазба
@keyframes командасы,
анимацияның кілт кадрларын белгілейді
transition тегіс өтулер, элементке түскенде орындалатын анимацияны көрсетеді