Sifat animation-direction

Sifat animation-direction menetapkan arah animasi. Secara lalai, animasi akan diulang hanya 1 kali dan kemudian kembali ke keadaan asal, kemudian, jika ditetapkan kelewatan animation-delay, akan menunggu masa yang ditetapkan dan kemudian kitaran akan bermula semula.

Sifat ini membolehkan untuk menukar tingkah laku ini, contohnya, supaya animasi selepas tamat kekal di tempat ia berakhir, dan tidak melompat kembali ke kedudukan permulaan.

Anda juga boleh menetapkan tingkah laku sedemikian: animasi akan pergi ke titik melampau dan kembali semula (seperti dalam transition). Lihat penerangan di bawah.

Sintaks

selector {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Nilai

Nilai	Penerangan
`reverse`	Animasi akan dimainkan dalam arah songsang.
`alternate`	Animasi akan dimainkan pertama dalam arah depan, kemudian dalam arah songsang (seperti transition).
`alternate-reverse`	Animasi akan dimainkan dari kedudukan akhir ke arah permulaan dan kembali. Pada dasarnya ini adalah nilai `alternate` dan `reverse` dalam satu gabungan.
`normal`	Animasi akan dimainkan dari permulaan hingga akhir, dan selepas tamat akan melompat secara tiba-tiba kembali ke kedudukan permulaan.

Nilai lalai: normal.

Contoh

Sekarang elemen akan bergerak dalam satu arah, dan kemudian kembali semula, kerana ditetapkan nilai alternate. Pada masa yang sama animation-duration mempunyai nilai 3 saat dan ini bermakna, bahawa pergerakan "pergi" dan "kembali" akan berlangsung selama 3 saat setiap satu:

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

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

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

Contoh

Sekarang elemen akan bergerak dalam arah songsang (sepatutnya dari kiri ke kanan, tetapi akan dari kanan ke kiri):

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

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Contoh

Sekarang elemen akan bergerak pergi dan balik, tetapi dalam arah songsang (sepatutnya bermula dari kiri, tetapi akan bermula dari kanan):

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

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

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

Lihat juga

sifat animation-name,
yang menetapkan nama animasi
sifat animation-duration,
yang menetapkan tempoh animasi
sifat animation-delay,
yang menetapkan kelewatan sebelum pelaksanaan animasi
sifat animation-timing-function,
yang menetapkan kelajuan pelaksanaan animasi
sifat animation-iteration-count,
yang menetapkan bilangan lelaran animasi
sifat animation-fill-mode,
yang menetapkan keadaan animasi
sifat animation-play-state,
yang membolehkan untuk menjeda animasi
sifat animation,
merupakan singkatan untuk animasi
arahan @keyframes,
yang menetapkan bingkai utama animasi
peralihan lancar transition, merupakan animasi ketika mengarah pada elemen