Tidadigi Logo

CSS transition-timing-function Property

Thuộc tính transition-timing-function chỉ định đường cong tốc độ của hiệu ứng chuyển đổi. Nó xác định cách các thuộc tính CSS thay đổi giá trị theo thời gian trong quá trình chuyển đổi. Đường cong này xác định tốc độ thay đổi ảnh hưởng đến độ mượt mà và cảm nhận. Nó còn ảnh hưởng đến quá trình chuyển đổi hoạt ảnh trên các phần tử web.

Syntax

animation-timing-function: <easing-function>|ease|linear|ease-in
    |ease-out|ease-in-out|cubic-bezier(p1, p2, p3, p4)|steps(n, <jumpterm>)
    |step-start|step-end|initial;

Có nhiều giá trị khác nhau mà chúng ta có thể gán cho thuộc tính này.

ValueDescription
linearHoạt ảnh tiến triển với tốc độ không đổi.
ease-inHoạt ảnh bắt đầu chậm và tăng tốc ở cuối.
ease-outHoạt ảnh bắt đầu nhanh và chậm lại ở cuối.
initialĐặt thuộc tính về giá trị mặc định của nó (ease).

Example: Ví dụ này minh họa thuộc tính transition-timing-function với các giá trị khác nhau. Các giá trị đó là: linear, ease, ease-in và ease-out. Mỗi div mở rộng chiều rộng từ 75px lên 300px trong 5 giây khi di chuột qua. Điều này thể hiện các tốc độ chuyển đổi khác nhau.

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS transition-timing-function Property</title>
    <style>
        div {
            height: 75px;
            width: 75px;
            background: yellowgreen;
            color: red;
            transition: width 5s;
        }

        #div1 {
            transition-timing-function: linear;
        }

        #div2 {
            transition-timing-function: ease;
        }

        #div3 {
            transition-timing-function: ease-in;
        }

        #div4 {
            transition-timing-function: ease-out;
        }

        div:hover {
            width: 300px;
        }
    </style>
</head>

<body>
    <h1>The transition-timing-function Property.</h1>
    <p>
        This is an example for the linear value in 
        the transition-timing-function property.
    </p>
    <div id="div1">linear</div>

    <p>
        This is an example for the ease value in 
        the transition-timing-function property.
    </p>
    <div id="div2">ease</div>

    <p>
        This is an example for the ease-in value in 
        the transition-timing-function property.
    </p>
    <div id="div3">ease-in</div>

    <p>
        This is an example for the ease-out value in 
        the transition-timing-function property.
    </p>
    <div id="div4">ease-out</div>
</body>

</html>

Output:

 css-transition-timing-function-property

Supported Browsers:


Last Updated : 21/07/2025