CSS Animations

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

• Use @keyframes to define the animation steps.
• Apply animations with properties like animation-name and animation-duration.
• Control the animation flow using animation-timing-function and animation-delay.

CSS Animation Properties

CSS animations involve several key properties:

@keyframes Rule

The @keyframes rule defines how an element’s styles change over time during an animation.

Syntax

@keyframes animation-name {
    from {
        /* Initial Styles */
    }
    to {
        /* Final Styles */
    }
}

• The from defines the starting styles, and to defines the ending styles.
• You can also use percentage values to specify intermediate steps.

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: changeColor 3s infinite;
        }

        @keyframes changeColor {
            from {
                background-color: blue;
            }

            to {
                background-color: green;
            }
        }
    </style>

<!--Driver Code Starts{-->
</head>

<body>
    <div class="box"></div>
</body>

</html>
<!--Driver Code Ends }-->

• The .box class creates a blue square and applies the changeColor animation that lasts 3 seconds and repeats infinitely.
• The @keyframes changeColor rule changes the background color from blue to green.

animation-name Property

The animation-name property specifies the name of the @keyframes animation to apply to an element.

Syntax

animation-name: animationName;

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: moveRight;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        @keyframes moveRight {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(200px);
            }
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box"></div>
</body>
</html>
<!--Driver Code Ends }-->

In this example

• The .box class applies the moveRight animation to the <div>.
• The animation-name links the element to the @keyframes moveRight sequence.
• The box moves horizontally from its original position to 200px to the right over 2 seconds, repeating infinitely.

animation-timing-function property

The animation-timing-function property controls the speed curve of an animation, defining how the animation progresses over its duration.

Syntax

animation-timing-function: timingFunction;

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: slide;
            animation-duration: 3s;
            animation-timing-function: ease-in;
            animation-iteration-count: infinite;
        }

        @keyframes slide {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(300px);
            }
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!--Driver Code Ends }-->

In this example

• The .box class applies the slide animation to the <div>.
• The animation-timing-function: ease-in; makes the animation start slowly and then speed up.

animation-delay property

The animation-delay property specifies a delay before an animation starts, controlling when the animation begins after being triggered.

Syntax

animation-delay: time;

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: fadeIn;
            animation-duration: 2s;
            animation-delay: 1s;
            animation-iteration-count: infinite;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!--Driver Code Ends }-->

In this example

• The .box element is set to fade in using the fadeIn animation.
• The animation-delay: 1s; delays the start of the animation by one second.
• The animation lasts for 2 seconds and repeats infinitely.

animation-iteration-count property

The animation-iteration-count property specifies how many times an animation should repeat.

Syntax

animation-iteration-count: number | infinite;

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-50px);
            }

            100% {
                transform: translateY(0);
            }
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box"></div>
</body>

</html>
<!--Driver Code Ends }-->

In this example

• The .box element uses the bounce animation that lasts 2 seconds.
• animation-iteration-count: infinite; makes the animation loop endlessly.

animation-direction property

The animation-direction property specifies whether an animation should play forward, backward, or alternate between the two directions.

Syntax

animation-direction: normal | reverse | alternate | alternate-reverse;

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: move 2s infinite;
            animation-direction: alternate;
        }
        @keyframes move {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(200px);
            }
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box"></div>
</body>
</html>
<!--Driver Code Ends }-->

In this example

• The .box element moves from its original position to 200px to the right.
• animation-direction: alternate; makes the animation play forward on the first iteration and then backward on the next, creating a back-and-forth motion.

animation-fill-mode property

The animation-fill-mode property specifies how a CSS animation should apply styles to its target before and after it is executing.

Syntax

animation-fill-mode: none | forwards | backwards | both;

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: move 3s forwards;
        }
        @keyframes move {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(200px);
            }
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!--Driver Code Ends }-->

In this example

• The .box element moves from its original position to 200px to the right over 3 seconds.
• animation-fill-mode: forwards; ensures that the box retains the final state of the animation after it completes.

animation-play-state property

The animation-play-state property controls whether an animation is running or paused.

Syntax

animation-play-state: running | paused;

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: spin 4s linear infinite;
            animation-play-state: paused;
        }

        .box:hover {
            animation-play-state: running;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!--Driver Code Ends }-->

In this example

• The .box element has a spin animation that rotates it 360 degrees over 4 seconds infinitely.
• animation-play-state: paused; initially pauses the animation.

Animation Shorthand Property

The animation shorthand property allows you to set all animation-related properties in a single declaration, making your CSS code cleaner and more concise.

Syntax

animation: [animation-name] [animation-duration] [animation-timing-function] 
[animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode]
[animation-play-state];

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: move 2s ease-in 1s infinite alternate forwards;
        }
        @keyframes move {
            from {
                transform: translateX(0);
                background-color: blue;
            }
            to {
                transform: translateX(200px);
                background-color: green;
            }
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!--Driver Code Ends }-->

In this example

• The .box class uses the animation shorthand to apply the move animation.
• The animation lasts for 2 seconds, starts after a 1-second delay, runs infinitely, alternates direction, and retains the final state.
• The box moves from its original position to 200px to the right and changes color from blue to green smoothly.

Best Practices for CSS Animations

• Use Animations Purposefully: Apply animations to enhance user experience without causing distractions.
• Animate Performance-Friendly Properties: Prefer animating properties like transform and opacity for smoother performance.
• Ensure Accessibility: Provide options for users to reduce or disable animations to accommodate those with motion sensitivities.

CSS Animations – FAQs

How to create a basic CSS animation?

To create a basic CSS animation, define keyframes using the @keyframes rule and apply the animation to an element using properties like animation-name and animation-duration.

What properties can be animated using CSS animations?

Most CSS properties that have numeric values or colors can be animated. Examples include width, height, margin, padding, background-color, opacity, and transform.

What properties can be animated using CSS animations?

Most CSS properties that have numeric values or colors can be animated. Examples include width, height, margin, padding, background-color, opacity, and transform.

Can CSS animations affect an element’s layout?

CSS animations can affect an element’s layout if the animated properties impact the layout (e.g., width, height, margin). However, it’s generally recommended to animate properties like transform and opacity for better performance.

What are some common uses of CSS animations?

• Animating elements on hover (buttons, images)
• Creating loading spinners
• Slide-in and slide-out effects for menus or modals
• Adding visual feedback for user actions

prakhar7

Follow

Improve

Article Tags :

• CSS
• Web Technologies
• CSS-Advanced