CSS animation Property

Last Updated : 24 Mar, 2023

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>