ตั้งค่า Animation เริ่มช้า จบช้า (Ease-in-out) ด้วย CSS

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

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

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

หมายเหตุ: โค้ดตัวอย่างมีความขัดแย้ง: ตัวอักษรเขียน ease-in-out effect แต่ CSS กำหนด ease-out ค่า ease-in-out = เริ่มช้า เร็วกลาง จบช้า ease-out = เริ่มเร็ว จบช้า alternate-reverse = รันถอยหลังก่อน แล้วค่อยไปข้างหน้า สลับกัน