CSS Tips: การใช้ animation-direction เพื่อสร้างภาพเคลื่อนไหว

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

CSS Tips: การใช้ animation-direction เพื่อสร้างภาพเคลื่อนไหว

Post by abdkode » 04/04/2019 2:25 pm

รู้หรือไม่ว่า ใน css เราสามารถสร้างการเคลื่อนไหวของอิลีเมนต์ได้ ซึ่งอาจจะไม่จำเป็นต้องใช้ javascript ในการทำเช่นนี้ ใน css มี property หนึ่งที่เรียกว่า animation-direction Property มันใช้ยังไง เรามาดูกัน

animation-direction Property ใน CSS ใช้เพื่อกำหนดทิศทางของภาพเคลื่อนไหว ทิศทางของการเคลื่อนไหวว่าควรเป็นไปข้างหน้า,ถอยหลังหรือรูปแบบอื่นๆ ซึ่งมีรูปแบบ syntax ดังนี้

Code: Select all

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
จาก syntax เราจะเห็นว่า มี Property Value ค่อนข้างหลากหลายนั้นคือ
  • normal
  • reverse
  • alternate
  • alternate-reverse
  • initial
  • inherit
1. normal : เป็นการกำหนดให้เคลื่อนไหวเล่นไปข้างหน้า ซึ่งเป็นค่าเริ่มต้นของ property นี้ การกำหนดsyntax คือ animation-direction: normal;

ตัวอย่างโค้ดการใช้ nomal ดังนี้

Code: Select all

<!DOCTYPE html> 
<html> 
	<head> 
		<style> 
			body { 
				text-align:center; 
			} 
			h1 { 
				color:navy; 
			} 
			h3 { 
				width: 100%; 
				animation-name: text; 
				animation-duration: 2s; 
				animation-iteration-count: infinite; 
			} 
			#one { 
				animation-direction: normal; 
			} 
			@keyframes text { 
				from { 
					margin-left: 60%; 
				} 
				to { 
					margin-left: 0%; 
				} 
			} 
		</style> 
	</head> 
	<body> 
		<h1>Mindphp</h1> 
		<h2>animation-direction property</h2> 
		<h3 id="one">This text is normal.</h3> 
	</body> 
</html>									 
จากโค้ดใน style จะเห็นว่า ได้กำำหนดไว้ให้ #one มีpropertyเป็น animation-direction: normal; และได้กำหนด keyframes text ว่าให้เคลื่อนไหวจากไหนไปไหน ในที่นี้คือ จาก margin-left: 60%; ไปยัง margin-left: 0%; พร้อมทั้งได้กำหนดความเร็วของการเลื่อนไหวด้วย animation-duration: 2s; ซึ่งผลลัพธ์ที่ได้คือ
animation-direction1.jpg
animation-direction1.jpg (7.21 KiB) Viewed 467 times
animation-direction2.jpg
animation-direction2.jpg (9.72 KiB) Viewed 467 times
จากผลลัพธ์ซึ่งเป็นเคลื่อน จากขวาไปซ้าย เนื่องจากจุดเริ่มต้นเราได้กำหนดให้ margin-left: 60%; คือmargin ซ้าย 60% จะทำให้ไปด้านขวาเป็นจุดเริ่มต้น และสิ้นสุดคือ margin-left: 0%; กลับไปตำแหน่งที่ไม่มี margin ไม่งงใช่ไหมครับ เรามาดูอีกตัวอย่างหนึ่งครับ

2. reverse : เป็นการกำหนดให้เคลื่อนไหวเล่นไปในทางตรงกันข้าม การกำหนดsyntax คือ animation-direction: reverse;
ผลลัพธ์ที่จะได้สำหรับ reverse คือ เหมือนเดิมเพียงแต่ จุดเริ่มต้นกับจัดสิ้นสุดจะสลับกัน จาก nomal เราเห็นการเคลื่อนไหวเป็น จากขวาไปซ้าย ส่วน reverse จะเป็นซ้ายไปขวา (ถ้าใช้โค้ดเดิมแต่เปลี่ยนค่าเป็น reverse)

3. alternate : เป็นการกำหนดให้เคลื่อนไหวเล่นไปข้างหน้าและต่อด้วยถอยหลัง ก็คือ normal+reverse การกำหนดsyntax คือ animation-direction: alternate;
ตัวอย่างโค้ดดังนี้

Code: Select all

 <!DOCTYPE html> 
<html> 
	<head> 
		<style> 
			body { 
				text-align:center; 
			} 
			h1 { 
				color:navy; 
			} 
			h3 { 
				width: 100%; 
				animation-name: text; 
				animation-duration: 2s; 
				animation-iteration-count: infinite; 
				overflow-y:hidden;
			} 
			#one { 
				animation-direction: alternate; 
			} 
			@keyframes text { 
				from { 
					margin-left: 60%; 
				} 
				to { 
					margin-left: 0%; 
				} 
			} 
		</style> 
	</head> 
	<body> 
		<h1>Mindphp</h1> 
		<h2>animation-direction property</h2> 
		<h3 id="one">This text is normal.</h3> 
	</body> 
</html>	

จากโค้ดคือเหมือนเดิมเพียงเปลี่ยนทิศทางของanimation-directionเป็น animation-direction: alternate; ผลลัพธ์ที่ได้คือ
alternate1.jpg
alternate1.jpg (9.7 KiB) Viewed 467 times
alternate2.jpg
alternate2.jpg (10.82 KiB) Viewed 467 times
4. alternate-reverse : เป็นการกำหนดให้เคลื่อนไหวตรงกันข้ามกับ alternate คือเล่นถอยหลังก่อนและต่อด้วยไปข้างหน้า ก็คือ reverse+normal
5. initial : ใช้เพื่อตั้งค่าคุณสมบัติภาพเคลื่อนไหวเป็นค่าเริ่มต้น
6. inherit : ใช้เพื่อสืบทอดคุณสมบัติภาพเคลื่อนไหวจากelementหลัก

เพื่อความเข้าใจมากขึ้นแนะว่าให้ทดลองนำโค้ดไปรันดู และเปลี่ยน Property Value ดูความแตกต่างของแต่ละตัว จะได้เห็นภาพมากขึ้นครับ สามารถสอบถามเพิ่มเติมคอมเม้นได้เลย

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 1 guest