animation-direction Property ใน CSS ใช้เพื่อกำหนดทิศทางของภาพเคลื่อนไหว ทิศทางของการเคลื่อนไหวว่าควรเป็นไปข้างหน้า,ถอยหลังหรือรูปแบบอื่นๆ ซึ่งมีรูปแบบ syntax ดังนี้
โค้ด: เลือกทั้งหมด
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;- normal
- reverse
- alternate
- alternate-reverse
- initial
- inherit
ตัวอย่างโค้ดการใช้ nomal ดังนี้
โค้ด: เลือกทั้งหมด
<!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>
- animation-direction1.jpg (7.21 KiB) Viewed 1285 times
- animation-direction2.jpg (9.72 KiB) Viewed 1285 times
2. reverse : เป็นการกำหนดให้เคลื่อนไหวเล่นไปในทางตรงกันข้าม การกำหนดsyntax คือ animation-direction: reverse;
ผลลัพธ์ที่จะได้สำหรับ reverse คือ เหมือนเดิมเพียงแต่ จุดเริ่มต้นกับจัดสิ้นสุดจะสลับกัน จาก nomal เราเห็นการเคลื่อนไหวเป็น จากขวาไปซ้าย ส่วน reverse จะเป็นซ้ายไปขวา (ถ้าใช้โค้ดเดิมแต่เปลี่ยนค่าเป็น reverse)
3. alternate : เป็นการกำหนดให้เคลื่อนไหวเล่นไปข้างหน้าและต่อด้วยถอยหลัง ก็คือ normal+reverse การกำหนดsyntax คือ animation-direction: alternate;
ตัวอย่างโค้ดดังนี้
โค้ด: เลือกทั้งหมด
<!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 (9.7 KiB) Viewed 1285 times
- alternate2.jpg (10.82 KiB) Viewed 1285 times
5. initial : ใช้เพื่อตั้งค่าคุณสมบัติภาพเคลื่อนไหวเป็นค่าเริ่มต้น
6. inherit : ใช้เพื่อสืบทอดคุณสมบัติภาพเคลื่อนไหวจากelementหลัก
เพื่อความเข้าใจมากขึ้นแนะว่าให้ทดลองนำโค้ดไปรันดู และเปลี่ยน Property Value ดูความแตกต่างของแต่ละตัว จะได้เห็นภาพมากขึ้นครับ สามารถสอบถามเพิ่มเติมคอมเม้นได้เลย
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP