CSS Animation and @Keyframes Property

Last Updated : 25 Jul, 2024

CSS allows the animation of HTML elements without using JavaScript. An animation lets an element systematically and with proper timing, change from one style to another. You can change whatever CSS properties you want, end the number of times, as you want it. To use CSS animation, you must first specify some @keyframes for the animation. @keyframes will describe which styles that element will have at specific times.

We will be using a basic example such as the animation of a battery charging.

The @keyframes property has the option to divide the animation time into parts/percentages and perform an activity that is specified for that part of the whole duration of the animation. the @keyframes property is given to each animation according to the name of that animation. It allows you to run the animation infinitely as well.

Here, is a simple CSS block that explains the usage of @keyframes:

Example: Usage of @keyframes in a background-color change.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation and @Keyframes Property</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" 
          crossorigin="anonymous">
    <style>
        body {
            background-color: #f8f9fa;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .container {
            text-align: center;
        }

        h1 {
            margin-bottom: 20px;
            color: #343a40;
        }

        p {
            margin-bottom: 40px;
            color: #6c757d;
            font-size: 1.1rem;
        }

        .circle {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border-radius: 50%;
            background-color: red;
            animation: circle 8s infinite;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        @keyframes circle {
            0% {
                background-color: red;
            }

            25% {
                background-color: yellow;
            }

            50% {
                background-color: blue;
            }

            75% {
                background-color: purple;
            }

            100% {
                background-color: green;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>CSS Animation with @Keyframes</h1>
        <p>Watch the circle change colors using the <code>@keyframes</code> property.</p>
        <div class="circle"></div>
    </div>
</body>

</html>

Output:

Note: While using @keyframes, there are some guidelines that are set in place for you to create a smooth and working animation. Guidelines such as, make sure you make the transitions smooth and specify when the style change will happen in percent or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is when the animation is going to start, 100% is when the animation is completed. For the best browser support, i.e. to make sure the animation is supported in all browsers throughout the internet, be sure to always define both the 0% and the 100% selectors.

The animation for the charging of a battery is important, as it helps you to understand just how the @keyframes property will help you to time your animation in perfect intervals and hence help make the transitions smooth. The charging of the battery is used to explain how you can set various animations within the given time-period by specifying the percentage of division, exactly how in the example the battery charges from 0-25% then from 25-50% and so on.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Battery Charging Animation</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .container {
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            text-align: center;
            max-width: 600px;
            width: 90%;
        }

        h1 {
            color: #2c3e50;
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            font-weight: 600;
        }

        .battery-container {
            position: relative;
            width: 80%;
            max-width: 300px;
            margin: 0 auto;
        }

        .battery {
            height: 120px;
            border: 8px solid #34495e;
            border-radius: 15px;
            position: relative;
            background-color: #ecf0f1;
            overflow: hidden;
        }

        .battery::before {
            content: '';
            height: 40%;
            width: 20px;
            background-color: #34495e;
            position: absolute;
            right: -28px;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 0 5px 5px 0;
        }

        .charge {
            height: 100%;
            width: 100%;
            background-color: #2ecc71;
            position: absolute;
            bottom: 0;
            left: -100%;
            animation: chargeAnimation 5s linear infinite;
        }

        @keyframes chargeAnimation {
            0% { left: -100%; }
            100% { left: 0; }
        }

        .battery-percentage {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            font-weight: bold;
            color: #34495e;
            z-index: 10;
            animation: percentageAnimation 5s linear infinite;
        }

        @keyframes percentageAnimation {
            0% { content: '0%'; }
            20% { content: '20%'; }
            40% { content: '40%'; }
            60% { content: '60%'; }
            80% { content: '80%'; }
            100% { content: '100%'; }
        }

        .status {
            margin-top: 1rem;
            font-size: 1.2rem;
            color: #7f8c8d;
        }

        @media (max-width: 576px) {
            h1 {
                font-size: 2rem;
            }

            .battery {
                height: 100px;
            }

            .battery-percentage {
                font-size: 1.5rem;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Battery Charging Animation</h1>
        <div class="battery-container">
            <div class="battery">
                <div class="charge"></div>
                <div class="battery-percentage"></div>
            </div>
        </div>
        <div class="status">Battery is charging...</div>
    </div>
</body>

</html>

Output:

sparkyboom

Improve

Article Tags :

CSS Animation and @Keyframes Property

Similar Reads

Thank You!

What kind of Experience do you want to share?