การสร้างอนิเมชั่นง่ายๆ ด้วย transition ของ CSS

ใน CSS เวอร์ชั่นหลังๆสามารถทำอนิเมชั่นง่ายๆ ได้หลากหลายรูปแบบด้วยคำสั่ง transition เช่น การเพิ่มความกว้าง ความสูง ความโปร่งทึบเป็นต้น

รูปแบบโค้ดที่ใช้งาน

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

• all คือ ประเภทของอนิเมชั่น สามารถเจาะจงได้ เช่น height width opacity เป็นต้น เพื่อลดการประมวลผลของ css ลง
• 1s คือ เวลาของการอนิเมชั่น สามารถใช้ 0.3s แบบนี้ได้
• ease-in-out คือ รูปแบบของอนิเมชั่น เช่น จัวหวะแรกช้า-ตอนท้ายเร็ว หรือ จังหวะแรกเร็ว-ตอนท้ายช้าเป็นต้น เป็นต้น คำสั่งมีดังนี้ ease, linear, ease-in ,ease-out, ease-in-out

ตัวอย่างการเขียนโค้ด

div {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}
div:hover {
    width: 300px;
}

ตามตัวอย่าง คือ เมื่อนำเมาส์วางที่ div ความกว้างก็จะยึดออก จาก 100px เป็น 300 px ด้วยความเร็ว 2s

ตัวอย่างการแสดงผล

• Facebook
• Twitter
• Line

Narongchai Suphiratwanich (K)

นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ SeedWebs & SeedThemes และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย