CSS Animations

CSS animations enable you to create rich, complex animations by defining keyframes and specifying animation properties. This can add a dynamic and engaging aspect to your web pages, enhancing the user experience.

Key Concepts

  • Keyframes: Define the intermediate steps in an animation sequence.
  • Animation Property: Specifies the animation to be applied to an element.
  • Animation Duration: Defines how long the animation should take to complete.
  • Animation Timing Function: Describes how the animation progresses over time.
  • Animation Delay: Sets a delay before the animation starts.
  • Animation Iteration Count: Defines how many times the animation should repeat.

Keyframes

Keyframes define the intermediate steps of the animation. You can specify how properties should change at various points during the animation. 


/* Keyframes Syntax */
@keyframes  {
    from {
        : ;
    }
    to {
        : ;
    }
}

Example: Keyframes


/* Keyframes Example */
@keyframes exampleAnimation {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100px);
        opacity: 0.5;
    }
}
This box animates with a keyframe animation.

Animation Property

The `animation` shorthand property is used to apply animations to an element. It combines several animation properties into one. 


/* Animation Property Syntax */
animation:       ;

Example: Animation Property


/* Animation Property Example */
.animation-example {
    animation: exampleAnimation 2s ease-in-out 1s infinite alternate;
}
This box animates with the animation property.

Animation Duration

The `animation-duration` property specifies how long an animation should take to complete one cycle. It can be set in seconds (s) or milliseconds (ms). 


/* Animation Duration Syntax */
animation-duration:

Example: Animation Duration


/* Animation Duration Example */
.animation-duration-example {
    animation-duration: 3s;
}
This box animates over 3 seconds.

Animation Timing Function

The `animation-timing-function` property describes how the animation progresses over its duration. Common values are `ease`, `linear`, `ease-in`, `ease-out`, and `ease-in-out`. 


/* Animation Timing Function Syntax */
animation-timing-function: ;

Example: Animation Timing Function


/* Animation Timing Function Example */
.animation-timing-function-example {
    animation-timing-function: ease-in-out;
}
This box animates with an "ease-in-out" timing function.

Animation Delay

The `animation-delay` property specifies a delay before the animation starts. It can be set in seconds (s) or milliseconds (ms). 


/* Animation Delay Syntax */
animation-delay:

Example: Animation Delay


/* Animation Delay Example */
.animation-delay-example {
    animation-delay: 2s;
}
This box starts animating after a 2-second delay.

Animation Iteration Count

The `animation-iteration-count` property defines how many times the animation should repeat. You can set it to a specific number or use `infinite` for endless repetition. 


/* Animation Iteration Count Syntax */
animation-iteration-count:  | infinite;

Example: Animation Iteration Count


/* Animation Iteration Count Example */
.animation-iteration-count-example {
    animation-iteration-count: infinite;
}
This box animates infinitely.