CSS Animations

CSS Animations are a powerful feature in Cascading Style Sheets (CSS) that enable developers to create dynamic and engaging animations directly within the browser. Unlike CSS transitions, which are triggered by a change in CSS property values, CSS animations allow for more complex and continuous animations to be defined.

Here are the key components of CSS Animations:

@Keyframes Rule

Keyframes define the specific stages of the animation and the CSS properties that are applied at each stage. Keyframes are defined using the @keyframes rule, where you specify the percentage of the animation's duration at which each keyframe occurs and the CSS properties to be applied at that point. For example:

Example

div {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: green;}
  to {background-color: pink;}
}

You can click on above box to edit the code and run again.

Output

Example

 @keyframes gfg 15s infinite {
    0% {
        top: 0px;
        width: 00px;
    }
    25% {
            top: 50px;
            background: LawnGreen;
            width: 50px;
        }
    50% {
            top: 100px;
            background: LightGreen;
            width: 100px;
        }
    
}

You can click on above box to edit the code and run again.

Output

@keyframes

Animation Property

The animation property is used to apply the animation to an element. It specifies the name of the keyframe animation, the duration of the animation, the timing function, any delays, the number of times the animation should repeat, and whether the animation should play in reverse. For example:

Example

#div {
  width: 100px;
  height: 100px;
  background: green;
  position: relative;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}

You can click on above box to edit the code and run again.

Output

Animation Properties

There are also individual properties that can be used to customize animations, such as:

animation-duration: Specifies the duration of the animation.
animation-timing-function: Specifies the speed curve of the animation.
animation-delay: Specifies a delay before the animation starts.
animation-iteration-count: Specifies the number of times the animation should repeat.
animation-direction: Specifies whether the animation should play forwards, backwards, or alternate directions.
animation-fill-mode: Specifies what styles are applied before and after the animation.
animation-play-state: Specifies whether the animation is running or paused.

CSS animations offer a declarative way to create sophisticated animations without relying on JavaScript or external libraries. They are well-supported in modern web browsers and can be used to create effects ranging from simple transitions to complex animations involving multiple elements and keyframes.