คุณสมบัติ animation-direction

คุณสมบัติ animation-direction กำหนด ทิศทางของแอนิเมชัน โดยค่าเริ่มต้น แอนิเมชัน จะทําซ้ำเพียง 1 ครั้ง และจากนั้น จะกลับสู่สถานะเริ่มต้น แล้วหลังจากนั้น หากกําหนดการหน่วงเวลา animation-delay ไว้ มันจะรอเวลาตามที่กําหนด และจากนั้นวงจรจะเริ่มต้น ใหม่อีกครั้ง

คุณสมบัตินี้ช่วยให้สามารถเปลี่ยนพฤติกรรมนี้ได้ ตัวอย่างเช่น เพื่อให้แอนิเมชันหลังจากสิ้นสุดแล้ว คงอยู่ที่จุดที่มันสิ้นสุด และไม่กระโดดกลับไปยังตําแหน่งเริ่มต้น

นอกจากนี้ยังสามารถกําหนดพฤติกรรมเช่นนี้ได้: แอนิเมชัน จะเคลื่อนไปยังจุดสิ้นสุดแล้วย้อนกลับมา (เหมือนใน transition) ดูคําอธิบายด้านล่าง

ไวยากรณ์

ตัวเลือก {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

ค่า

ค่า	คําอธิบาย
`reverse`	แอนิเมชันจะเล่นในทิศทางย้อนกลับ
`alternate`	แอนิเมชันจะเล่นในทิศทางไปข้างหน้า ก่อน แล้วจึงเล่นในทิศทางย้อนกลับ (เหมือน transition)
`alternate-reverse`	แอนิเมชันจะเล่นจากตําแหน่งสุดท้าย ไปยังตําแหน่งเริ่มต้นและย้อนกลับ โดยพื้นฐานแล้วนี่คือค่า `alternate` และ `reverse` ในขวดเดียวกัน
`normal`	แอนิเมชันจะเล่นจากจุดเริ่มต้นไปยังจุดสิ้นสุด และหลังจาก สิ้นสุดแล้วจะกระโดดกลับไปยังตําแหน่งเริ่มต้นทันที

ค่าเริ่มต้น: normal

ตัวอย่าง

ตอนนี้องค์ประกอบจะเคลื่อนที่ไปในทิศทางเดียว จากนั้นจึงเคลื่อนที่กลับมา เนื่องจากกําหนด ค่า alternate ไว้ ในขณะที่ animation-duration มีค่า 3 วินาที และนั่นหมายความว่า การเคลื่อนที่ "ไป" และ "กลับ" จะ ใช้เวลา 3 วินาทีแต่ละครั้ง:

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

ตัวอย่าง

ตอนนี้องค์ประกอบจะเคลื่อนที่ในทิศทาง ย้อนกลับ (ควรจากซ้ายไปขวา แต่จะ จากขวาไปซ้าย):

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

ตัวอย่าง

ตอนนี้องค์ประกอบจะเคลื่อนที่ไปมา แต่ในทิศทางย้อนกลับ (ควรเริ่มจากซ้าย แต่จะเริ่มจากขวา):

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

ดูเพิ่มเติม

คุณสมบัติ animation-name,
ซึ่งกําหนดชื่อของแอนิเมชัน
คุณสมบัติ animation-duration,
ซึ่งกําหนดระยะเวลาของแอนิเมชัน
คุณสมบัติ animation-delay,
ซึ่งกําหนดการหน่วงเวลาก่อนการดําเนินการแอนิเมชัน
คุณสมบัติ animation-timing-function,
ซึ่งกําหนดความเร็วในการดําเนินการแอนิเมชัน
คุณสมบัติ animation-iteration-count,
ซึ่งกําหนดจํานวนรอบของแอนิเมชัน
คุณสมบัติ animation-fill-mode,
ซึ่งกําหนดสถานะของแอนิเมชัน
คุณสมบัติ animation-play-state,
ซึ่งช่วยให้สามารถหยุดแอนิเมชันชั่วคราวได้
คุณสมบัติ animation,
ซึ่งเป็นตัวย่อสําหรับแอนิเมชัน
คําสั่ง @keyframes,
ซึ่งกําหนดเฟรมสําคัญของแอนิเมชัน
การเปลี่ยนผ่านอย่างลื่นไหล transition, ซึ่งเป็นแอนิเมชันเมื่อวางเมาส์เหนือองค์ประกอบ