ตั้งค่า Animation เริ่มช้า เร็วกลาง จบช้า (Ease) ด้วย CSS

ใช้คุณสมบัติ animation-timing-function ค่า ease เพื่อตั้งค่าแอนิเมชันเริ่มช้า เร็วกลาง จบช้า

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

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 150px;
      height: 200px;
      position: relative;
      background-color: yellow;
      animation-name: myanim;
      animation-duration: 2s;
      animation-direction: alternate-reverse;
      animation-iteration-count: 3;
    }
    @keyframes myanim {
      from { left: 100px; }
      to { left: 200px; }
    }
    #demo1 { animation-timing-function: ease; }
  </style>
</head>
<body>
  <div id="demo1">ease effect</div>
</body>
</html>

คำอธิบาย: ease เป็นค่าเริ่มต้นของ animation-timing-function คล้าย ease-in-out แต่โค้งความเร็วแตกต่างเล็กน้อย ease เน้น "เริ่มช้า เร็วขึ้น แล้วช้าลงก่อนจบ" เป็นค่าที่ดู tự nhiênที่สุดสำหรับ UI interactions