การทำงานกับ CSS Transitions

ใช้คุณสมบัติ transition เพื่อทำงานกับ CSS Transitions

ตัวอย่างโค้ด

ลองรันโค้ดด้านล่างเพื่อทดสอบ transitions ใน CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 150px;
      height: 150px;
      background: blue;
      transition: width 4s;
    }
    div:hover {
      width: 200px;
    }
  </style>
</head>
<body>
  <h1>Heading One</h1>
  <p>Hover เมาส์ที่กล่องด้านล่างเพื่อเปลี่ยนความกว้าง:</p>
  <div></div>
</body>
</html>

คำอธิบาย: transition: width 4s คือ shorthand property ระบุ property ที่จะ transition (width) และ duration (4s) เมื่อ hover ความกว้างจะขยายจาก 150px เป็น 200px ภายใน 4 วินาที แบบนุ่มนวล