บทความที่ผ่านมาเราได้พูดถึง 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;
  }