Tidadigi Logo

CSS animation-timing-function Property

Thuộc tính animation-timing-function trong CSS dùng để chỉ định cách animation chuyển đổi giữa các keyframe. Nó xác định đường cong tốc độ của animation, quyết định cách tính toán keyframe trung gian. Nó cũng quyết định nhịp độ của animation.

Cú pháp: 

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubic-bezier(n, n, n, n) | initial | inherit;

Giá trị thuộc tính

Giá trịMô tả
easeAnimation bắt đầu chậm, tăng tốc và sau đó chậm lại (mặc định).
linearAnimation duy trì tốc độ không đổi từ đầu đến cuối.
ease-inAnimation bắt đầu chậm và sau đó tăng tốc.
ease-outAnimation chạy ở tốc độ bình thường nhưng chậm lại ở cuối.
ease-in-outAnimation bắt đầu chậm, tăng tốc và sau đó chậm lại.
step-startAnimation nhảy ngay lập tức đến trạng thái cuối ở đầu keyframe.
step-endAnimation nhảy đến trạng thái cuối ở cuối keyframe.
steps()Chỉ định một hàm bước với số bước và vị trí bắt đầu hoặc kết thúc (ví dụ: steps(4, end)).
cubic-bezier()Xác định hàm thời gian tùy chỉnh bằng đường cong cubic-bezier (ví dụ: cubic-bezier(0.25, 0.1, 0.25, 1.0)).
initialĐặt thuộc tính về giá trị mặc định của nó.
inheritKế thừa thuộc tính từ phần tử cha của nó.

Ví dụ: Chương trình HTML minh họa các giá trị thuộc tính trên cho animation-timing-function.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | animation-timing-function Property
    </title>
    <style>
        .geeks {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
            font-family: Times New Roman;
        }

        .geeks1 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
            font-family: Times New Roman;
        }

        h2 {
            width: 350px;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            background-color: rgb(255, 210, 85);
        }

        #one {
            animation-timing-function: ease;
        }

        #two {
            animation-timing-function: linear;
        }

        #three {
            animation-timing-function: ease-in;
        }

        #four {
            animation-timing-function: ease-out;
        }

        #five {
            animation-timing-function: ease-in-out;
        }

        @keyframes text {
            from {
                margin-left: 60%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <div class="geeks">
        GeeksforGeeks
    </div>
    <div class="geeks1">
        A computer science portal for geeks
    </div>
    <!-- For this the animation-timing-function will 
             be set to ease -->
    <h2 id="one">
        This text is ease.
    </h2>
    <!-- For this animation-timing-function will 
             be set to linear -->
    <h2 id="two">
        This text is linear.
    </h2>
    <!-- For this animation-timing-function will 
             be set to ease-in -->
    <h2 id="three">
        This text is ease-in.
    </h2>
    <!-- For this animation-timing-function will 
             be set to ease-out -->
    <h2 id="four">
        This text is ease-out.
    </h2>
    <!-- For this animation-timing-function will 
             be set to ease-in-out -->
    <h2 id="five">
        This text is ease-in-out.
    </h2>
</body>
  
</html>

Đầu ra:


Thuộc tính animation-timing-function trong CSS rất cần thiết để xác định tốc độ và đường cong tốc độ. Bằng cách hiểu và sử dụng các hàm thời gian khác nhau, bạn có thể tạo animation mượt mà. Tạo các animation hấp dẫn cho các dự án web của bạn.

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi animation-timing-function property được liệt kê bên dưới:

  • Google Chrome 43.0 trở lên
  • Edge 12.0 trở lên
  • Firefox 16.0 trở lên
  • Opera 30.0 trở lên
  • Safari 9.0 trở lên

Last Updated : 21/07/2025