CSS Animations

CSS allows animation of HTML elements without using JavaScript.We can control the movement and appearance of elements on web pages, using CSS animations.

To use CSS animation, use @keyframes to define the animation steps. The @keyframes rule specifies the styles the element will have at different times during the animation.
Use the animation-name, animation-duration, and other animation properties to apply the animation to an element.

Example:

example.html
styles.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Animation Example</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="animated-box"></div>
  </body>
</html>

/* Define the keyframes for the animation */
@keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}

/_ Apply the animation to the div using detailed properties _/
.animated-box {
width: 100px;
height: 100px;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite; /_ Optional: makes the animation repeat infinitely _/
}

/_ Apply the animation to the div using the shorthand property _/
.animated-box {
width: 100px;
height: 100px;
animation: example 4s infinite; /_ Shorthand for name, duration, and iteration count _/
}

CSS Animation Properties

@keyframes: Specifies the animation code, defining the intermediate steps in the animation.
animation: A shorthand property for setting all the animation properties in a single declaration(example above).
animation-delay: Specifies a delay for the start of an animation
animation-direction: Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration: Specifies how long time an animation should take to complete one cycle
animation-fill-mode: Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count: Specifies the number of times an animation should be played
animation-name: Specifies the name of the @keyframes animation
animation-play-state: Specifies whether the animation is running or paused
animation-timing-function: Specifies the speed curve of the animation