CSS @keyframes Rule

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 the best support of browser always specify both the 0% and the 100% selectors.

Syntax:

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

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

Term	Description
animation-name	Defines the name of the animation.
keyframes-selector	Specifies the percentage of the animation sequence (0% to 100%). Multiple selectors can be used in one animation.
css-styles	Specifies one or more valid CSS style properties to be applied at each keyframe of the animation.

Example 1: This example describes the use of the @keyframe rule to add the animation to the element.

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>w3wiki</h1>
    </div>
</body>

</html>

Output:

Example 2: This example describes the use of the @keyframe rule using the !important rule in CSS.

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>w3wiki</h1>
        </div>
    </center>
</body>

</html>

Output:

Supported Browsers: The browser supported by @keyframes Rule are listed below:

Contact Us