การใช้งาน Animate.css ร่วมกับการ hover

บทความที่ผ่านมาเราได้พูดถึง Animate.CSS มีคำถามว่า ถ้าจะใช้งาน Animate.css เมื่อเรา hover เหนือวัตถุใดๆก็ตามในเว็บไซต์ได้อย่างไร คำตอบคือเราไม่สามารถทำให้วัตถุมันขยับหรือหยุดขยับได้ถ้าใช้เพียง Animate.css อย่างเดียว แต่เราจะต้องใช้คู่กับคำสั่งอื่น หรือต้องมีการปรับ Animate.css เพื่อให้สามารถใช้งานร่วมกับ hover ได้ เราจะมีวิธีในการจัดการเรื่องนี้อยู่ง่ายๆโดยการเพิ่ม css นิดหน่อย


ดูโค้ดเดิมกันก่อน

วิธีการใช้งาน animate.css เริ่มจากเราจะต้องเพิ่ม class ไป 2 ตัวให้กับวัตถุที่เราต้องการให้มันเคลื่อนไหว เช่น class="animated bounce" class แรกคือ animated เพื่อบอกว่าต้องการให้วัตถุนี้มีการขยับนะ อีกตัวคือ bounce เพื่อบอกว่าจะให้มันขยับแบบไหน สิ่งที่เราทำคือไปส่องของของเดิมว่า animate มันประกอบด้วยคำสั่งอะไรบ้าง


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


จะได้ว่าคำสั่งจะประกอบด้วย 2 ส่วนคือ เวลาที่ใช้ในการทำ animate (animation-duration) และอีกส่วนคือ หลังจากที่ animate ไปแล้วจะให้ทำยังไงต่อ (animation-fill-mode) 

เขียน css เพิ่มเติม

พอไปดูคำสั่งเดิมแล้วจากนั้นเราจึงลองใส่ class เพิ่มเข้าไปชื่อว่า hover แทนที่จะเป็น animate ตามตัวอย่างด้านล่าง


เราสร้าง class ชือว่า hover เข้ามาแทน animate จากนั้นเพิ่ม css เข้าไปว่าเมื่อไหร่ก็ตามที่มีการ hover ให้ใช้คำสั่งเดียวกันกับ animate ไปเลย ตามโค้ดด้านล่าง

.hover:hover {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }

เท่านี้เราก็จะได้ class hover สำหรับใช้แทน animate ซึ่งมันจะทำงานก็ต่อเมื่อมีเมาส์ไปวางอยู่เหนือวัตถุที่เรากำหนด
author
นันทวัฒน์ ไชยรัตน์

สวัสดีครับผมเป็นโปรแกรมเมอร์ที่ทำงานมาหลายที่ เปลี่ยนมาหลายสายงานครับเลยพอจะมีประสพการณ์มาเขียนบทความหลายๆเรื่องครับ ผมชอบลองทำอะไรใหม่ๆครับบางครั้งลองไปก็ลืมเลยต้องหาที่จดครับ เลยมาขอจดไว้ที่เว็บนี้ครับ