Cách đặt đường cong tốc độ cho hiệu ứng chuyển tiếp với CSS

Sử dụng thuộc tính transition-timing-function để đặt đường cong tốc độ của hiệu ứng chuyển tiếp. Các giá trị bạn có thể đặt là: ease, ease-in, ease-out, linear, v.v.

Ví dụ

Bạn có thể chạy mã sau để đặt đường cong tốc độ cho hiệu ứng chuyển tiếp với CSS:

<!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>Hiệu ứng chuyển tiếp</h1>
    <p>Di chuột qua các div và quan sát hiệu ứng chuyển tiếp và tốc độ:</p>
    <div id="effect1">hiệu ứng linear</div><br>
    <div id="effect2">hiệu ứng ease-in</div><br>
  </body>
</html>