CSS animation-timing-function Property

Last Updated : 23 Aug, 2024

The animation-timing-function property in CSS is used to specify how an animation makes transitions through keyframes. It defines the speed curve of the animation, determining how the intermediate keyframes are calculated and the pacing of the animation.

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

Value	Description
`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 of the keyframe animation.
`step-end`	The animation jumps to the end state at the end of the keyframe animation.
steps()	Specifies a stepping function with the number of steps and the position of the start or end (e.g., `steps(4, end)`).
cubic-bezier()	Defines a custom timing function using a cubic-bezier curve (e.g., `cubic-bezier(0.25, 0.1, 0.25, 1.0)`).
`initial`	Sets the property to its default value.
`inherit`	Inherits the property from its parent element.

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

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>

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

Supported Browser: The browser supported by animation-timing-function property are listed below:

Google Chrome 43.0 and above
Edge 12.0 and above
Firefox 16.0 and above
Opera 30.0 and above
Safari 9.0 and above

CSS animation-delay Property

vt_m

Improve

Article Tags :

CSS animation-timing-function Property

Property Value

Similar Reads

Thank You!

What kind of Experience do you want to share?