Animation using keyframes

3 min readMar 5, 2023

Have you checked the above video / output ?

The above animation/transition is designed using plain HTML and CSS. For making a website more engaging, and attractive and for user retention animation is a good and easy way. But in modern times it is replaced with JavaScript or libraries based on JavaScript, yup the base remains the same. When we talk about animation using HTML and CSS which can be achieved through keyframes. To use keyframes, create a keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe declaration. Each keyframes rule contains a style list of keyframes selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe.

You can list the keyframe percentages in any order, they will be handled in the order they should occur.

Below is the html template which is used for the navigation bar and rendering images which is used for the animation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shantell+Sans:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#furniture">Furniture</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <div class="holding">
    <span class="image1">
        <img src="9507.jpg" alt="Red Funiture">
    </span>
    <span class="image2">
        <img src="867.jpg" alt="Cream chair">
    </span>
    <br>
    <br>
    <span class="head_text">Urban Furniture</span>
    <br>
    <span class="quotation">Experience luxury</span>
    <br>
    <span class="image3">
        <img src="882.jpg" alt="check print chair">
    </span>
    <span class="image4">
        <img src="decorative-lamp.jpg" alt="lamp">
    </span>
</div>
</body>
</html>

Below CSS code used for the animation, which use keyframe for different part / span of time and keep going for the infinite time :

.holding {
    margin-top: 100px;
    margin-left: 300px;
}


img{
    width: 200px;
    height: 200px;
}
.image1 {
    position: relative;
    animation-name: red_funiture;
    animation-duration: 6s;
    animation-delay: 4s;
    animation-iteration-count: infinite;
}
@keyframes red_funiture {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
        left: 600px;
        top: 0px;
    }
    75% {
        left: 600px;
        top: 400px;
    }
    100% {
        left: 0px;
        top: 300px;
    }
}

.image2 {
    position: relative;
    animation-name: cream_funiture;
    animation-duration: 6s;
    animation-delay: 4s;
    animation-iteration-count: infinite;
    padding-left: 400px;
}
@keyframes cream_funiture {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
        left: 0px;
        top: 300px;
    }
    75% {
        left: -600px;
        top: 400px;
    }
    100% {
        left: -600px;
        top: 0px;
    }
}

.image3 {
    position: relative;
    animation-name: check_funiture;
    animation-duration: 6s;
    animation-delay: 4s;
    animation-iteration-count: infinite;
}
@keyframes check_funiture {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
        left: 0px;
        top: -400px;
    }
    75% {
        left: 600px;
        top: -400px;
    }
    100% {
        left: 600px;
        top: -20px;
    }
}
.image4 {
    position: relative;
    animation-name: lamp;
    animation-duration: 6s;
    animation-delay: 4s;
    animation-iteration-count: infinite;
    padding-left: 400px;
}
@keyframes lamp {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
        left: -600px;
        top: 0px;
    }
    75% {
        left: -600px;
        top: -300px;
    }
    100% {
        left: 0px;
        top: -300px;
    }
}

.head_text {
    font-family: 'Shantell Sans', cursive;
    font-size: 40px;
    padding-left: 250px;
    font-weight: 400;
}

.quotation{
    font-family: 'Shantell Sans', cursive;
    font-size: 20px;
    padding-left: 300px;
    font-weight: 400;

}


ul {
    list-style-type: none;
    margin-left: 800px;
    padding-top: 10px; 
    overflow: hidden;
    background-color: #333;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
  }
  
  li a:hover {
    background-color: #111;
    color: gold;
  }

Hence the above keyframes animation can have different use cases. It can be used for animating elements all over the screen with time control as per user / designer need.

Animation using keyframes

Written by Anmol Choudhary