การใช้งาน 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 ตามตัวอย่างด้านล่าง
.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; }