HTML CSS - CSS Animations

Creating animations with CSS

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style. This tutorial covers how to create animations with CSS.

Basic Animation Syntax

The basic syntax of an animation includes the @keyframes rule and the animation property. Here is an example:

@keyframes example-animation {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(0);
    }
}

.element {
    animation: example-animation 3s infinite;
}
            

Defining Keyframes

The @keyframes rule is used to define the keyframes of the animation. Keyframes indicate the start and end states of the animation, as well as intermediate steps. Here is an example:

@keyframes example-animation {
    0% {
        transform: translateX(0);
        background-color: lightblue;
    }
    50% {
        transform: translateX(100px);
        background-color: lightgreen;
    }
    100% {
        transform: translateX(0);
        background-color: lightblue;
    }
}
            

Applying Animations

To apply an animation, you use the animation property. This property is a shorthand for several animation-related properties:

• animation-name: Specifies the name of the @keyframes animation.
• animation-duration: Specifies the duration of the animation.
• animation-timing-function: Specifies the timing function of the animation.
• animation-delay: Specifies the delay before the animation starts.
• animation-iteration-count: Specifies the number of times the animation should run.
• animation-direction: Specifies whether the animation should alternate direction.

Here is an example:

.element {
    animation: example-animation 3s ease-in-out 1s infinite alternate;
}
            

Animation Properties

The animation property is a shorthand for the following individual properties:

• animation-name: Specifies the name of the keyframes animation.
• animation-duration: Specifies how long an animation should take to complete one cycle.
• animation-timing-function: Specifies the speed curve of the animation.
• animation-delay: Specifies when the animation should start.
• animation-iteration-count: Specifies the number of times the animation should run.
• animation-direction: Specifies whether the animation should alternate direction.
• animation-fill-mode: Specifies a style for the element when the animation is not playing.
• animation-play-state: Specifies whether the animation is running or paused.

Here is an example using individual properties:

.element {
    animation-name: example-animation;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
            

Example: Color and Transform Animation

Here is an example that demonstrates a color change and transform animation:

@keyframes example-animation {
    0% {
        transform: translateX(0);
        background-color: lightblue;
    }
    50% {
        transform: translateX(100px);
        background-color: lightgreen;
    }
    100% {
        transform: translateX(0);
        background-color: lightblue;
    }
}

.element {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    animation: example-animation 3s infinite;
}
            

Summary

In this tutorial, you learned about creating animations with CSS. CSS animations allow you to animate transitions between different styles, enhancing the user experience. You explored the basic syntax of animations, defining keyframes, applying animations, and the various animation properties. Understanding and using CSS animations is essential for creating engaging and interactive web designs.