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

Post a reply


This question is a means of preventing automated form submissions by spambots.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is ON
[url] is ON
Smilies are ON

Topic review
   

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

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


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

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

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

Top