ตั้งค่าโค้งความเร็ว Transition Effect ด้วย CSS

ใช้คุณสมบัติ transition-timing-function เพื่อตั้งค่าโค้งความเร็วของ transition effect ค่าที่ใช้ได้: ease, ease-in, ease-out, linear, เป็นต้น

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

ลองรันโค้ดด้านล่างเพื่อตั้งค่าโค้งความเร็ว transition effect:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      transition: width 4s;
    }
    #effect1 { transition-timing-function: linear; }
    #effect2 { transition-timing-function: ease-in; }
    div:hover { width: 250px; }
  </style>
</head>
<body>
  <h1>Transition Effect</h1>
  <p>Hover ที่ div แต่ละอันเพื่อดู transition effect และความเร็ว:</p>
  <div id="effect1">linear effect</div><br>
  <div id="effect2">ease-in effect</div><br>
</body>
</html>

คำอธิบาย: ตัวอย่างเปรียบเทียบ linear (เร็วคงที่) กับ ease-in (เริ่มช้า) ทั้งคู่ transition width 4s เหมือนกัน แต่รูปแบบความเร็วต่างกัน