CSS animation-timing-function Property

The CSS animation-timing-function property specifies the speed curve of an animation, controlling how the animation progresses from one keyframe to another.

Controls the speed of an animation.
Determines how the animation progresses over time.
Supports values such as ease, linear, ease-in, ease-out, and ease-in-out.
Allows custom timing curves using cubic-bezier().

Syntax:

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;

Property Value

ease: The animation starts slowly, speeds up, and then slows down (default).
linear: The animation maintains the same speed from start to end.
ease-in: The animation begins slowly and then speeds up.
ease-out: The animation plays at normal speed but slows down at the end.
ease-in-out: The animation starts slowly, speeds up, and then slows down again.
step-start: The animation jumps immediately to the end state at the start.
step-end: The animation jumps to the end state at the end.
steps(): Defines a stepping function with a specified number of steps.
cubic-bezier(): Defines a custom timing function using a cubic-bezier curve.
initial: Sets the property to its default value.
inherit: Inherits the property value from the parent element.

Example: HTML Program to illustrate the above property values for the animation-timing-function property.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | animation-timing-function Property
    </title>
<!--Driver Code Ends-->

    <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>

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

Output:

The animation-timing-function property in CSS is essential for defining the pacing and speed curve of animations. By understanding and using different timing functions, you can create smooth and engaging animations for your web projects

CSS animation-timing-function Property

Property Value

Example: HTML Program to illustrate the above property values for the animation-timing-function property.

Explore