CSS animation Property

Last Updated : 30 Jul, 2024

The CSS animation property is used to specify the animation that should be applied to an element. The animation property is a shorthand for several other CSS properties that control different aspects of the animation.

Syntax:

animation: animation-name animation-duration 
           animation-timing-function animation-delay
           animation-iteration-count animation-direction
           animation-fill-mode animation-play-state;

Property Values:

animation-name: It is used to specify the name of the @keyframes describing the animation.
animation-duration: It is used to specify the time duration and it takes animation to complete one cycle.
animation-timing-function: It is used to specify how the animation makes transitions through keyframes.
animation-delay: It is used to specify the delay when the animation starts.
animation-iteration-count: It is used to specify the number of times the animation will repeat. It can specify as infinite to repeat the animation indefinitely.
animation-direction: It is used to specify the direction of the animation.
animation-fill-mode: It is used to specify what values are applied by the animation before and after it is executed.
animation-play-state: It is used to allow you to play/pause the animation.

Example 1: The following code demonstrates the animation property using @keyframes rules.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>  CSS animation Property </title>
    
    <style>
        h1 {
            color: green;
        }

        #imageID {
            width: 400px;
            height: 100px;
            position: relative;
            animation: GFG 5s linear 1s infinite alternate;
        }

        @keyframes GFG {
            0% {
                left: 0px;
                top: 0px;
            }

            25% {
                left: 200px;
                top: 200px;
            }

            50% {
                left: 200px;
                top: 0px;
            }

            75% {
                left: 0px;
                top: 200px;
            }

            100% {
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>CSS animation Property</h3>

    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png"
        id="imageID">
</body>
</html>

Output:

Example 2: The following code demonstrates the CSS @keyframes rule with the name “circle”.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS animation Property
    </title>
    
    <style>
        div {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: red;
            animation: circle 8s infinite;
        }

        @keyframes circle {
            0% {
                background-color: red;
            }

            25% {
                background-color: yellow;
            }

            50% {
                background-color: blue;
            }

            100% {
                background-color: green;
            }
        }
    </style>
</head>

<body>
    <h1 style="color:green">GeeksforGeeks</h1>

    <h3>CSS animation Property</h3>

    <div></div>
</body>
</html>