CSS @keyframes Rule

Last Updated : 09 Oct, 2024

The CSS @keyframes rule defines animations by specifying keyframes that describe the styles to be applied at various points during the animation duration. It allows for smooth transitions and transformations in web elements, controlled through percentages or from-to values.

Note:For optimal browser support, always include both 0% and 100% keyframes in your animation.

Syntax:

@keyframes animation-name {
    keyframes-selector {
        css-styles;
    }
}

Property value:

This parameter accepts three values that are mentioned above and described below:

Term	Description
animation-name	Specifies the name of the animation, which is used to reference it in the animation or animation-name property.
keyframes-selector	Indicates the percentage of the animation sequence (e.g., 0%, 50%, 100%) or can be defined using from (equivalent to 0%) and to (equivalent to 100%).
css-styles	Specifies one or more valid CSS style properties to be applied at each keyframe of the animation.

Basic Usage Examples

Example 1: Basic Animation Using @keyframes

This example demonstrates how to animate the background color of a div from red to blue.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: white;
            text-align: center;
        }

        div {
            background: green;
            position: relative;
            animation: gfg 10s infinite;
        }

        /* keyframe CSS style */
        @keyframes gfg {
            0% {
                top: 0px;
                width: 00px;
            }

            25% {
                top: 50px;
                background: LawnGreen;
                width: 50px;
            }

            50% {
                top: 100px;
                background: LightGreen;
                width: 100px;
            }

            75% {
                top: 150px;
                background: MediumSeaGreen;
                width: 150px;
            }

            100% {
                top: 200px;
                color: white;
                background: Green;
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>
        <h1>GeeksforGeeks</h1>
    </div>
</body>

</html>

Output:

Example 2: Using Multiple Keyframes

You can define multiple keyframes to create more complex animations:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: white;
            text-align: center;
        }

        div {
            background: green;
            position: relative;
            animation: gfg 7s infinite;
        }

        @keyframes gfg {
            0% {
                top: 0px;
                width: 0px;
            }

            25% {
                top: 50px !important;
                background: LawnGreen;
            }

            50% {
                top: 100px !important;
                background: LightGreen;
            }

            100% {
                top: 200px !important;
                color: white;
                background: Green;
                width: 210px;
            }
        }
    </style>
</head>

<body>
    <center>
        <div>
            <h1>GeeksforGeeks</h1>
        </div>
    </center>
</body>

</html>

Output:

Supported Browsers:

The browser supported by @keyframes Rule are listed below:

CSS @media Rule

Sabya_Samadder

Improve

Article Tags :