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 เพื่อสร้างภาพเคลื่อนไหว

Postby 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 430 times
animation-direction2.jpg
animation-direction2.jpg (9.72 KiB) Viewed 430 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 430 times
alternate2.jpg
alternate2.jpg (10.82 KiB) Viewed 430 times


4. alternate-reverse : เป็นการกำหนดให้เคลื่อนไหวตรงกันข้ามกับ alternate คือเล่นถอยหลังก่อนและต่อด้วยไปข้างหน้า ก็คือ reverse+normal
5. initial : ใช้เพื่อตั้งค่าคุณสมบัติภาพเคลื่อนไหวเป็นค่าเริ่มต้น
6. inherit : ใช้เพื่อสืบทอดคุณสมบัติภาพเคลื่อนไหวจากelementหลัก

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

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

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 10 guests