Thuộc tính transition-timing-function trong CSS

Để thiết lập các đường cong tốc độ khác nhau với transition-timing-function, bạn có thể chạy mã sau:

Ví dụ

<!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;
      }
      #effect3 {
        transition-timing-function: ease-out;
      }
      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>
    <div id="effect3">hiệu ứng ease-out</div><br>
  </body>
</html>