Thiết lập animation kết thúc chậm (slow end) với CSS

Animation timing function: ease-out

Để tạo hiệu ứng animation bắt đầu nhanh và kết thúc chậm (slow end), bạn sử dụng thuộc tính animation-timing-function với giá trị ease-out. Điều này tạo cảm giác tự nhiên như vật thể giảm tốc độ khi đến đích.

Các giá trị chính của animation-timing-function

Giá trị	Mô tả
`ease`	Mặc định: chậm - nhanh - chậm
`ease-in`	Khởi động chậm, tăng tốc dần
`ease-out`	Khởi động nhanh, giảm tốc dần (slow end)
`ease-in-out`	Chậm ở cả đầu và cuối
`linear`	Tốc độ đều đặn
`cubic-bezier()`	Tùy chỉnh đường cong Bezier

Ví dụ hoàn chỉnh

<!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-out effect</div>
</body>
</html>

Ứng dụng thực tế

Modal/Dialog: Hiện lên nhanh (ease-out) để thu hút sự chú ý.
Toast notification: Xuất hiện nhanh, biến mất chậm.
Button hover: Phản hồi nhanh khi chuột vào.