How To Create Simple Zoom In and Zoom Out animation

In this topic,

We are going to see how to create simple zoom-in and zoom-out animation using single div.

Step-1: Create Html Code in the index.html file.

<div> </div>

Step-2: Add CSS Code in the <style>…</style> on index.html file.

div {
  animation-name: my-animation;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  width: 300px;
  height: 100px;
  border-radius: 10px;
  position: absolute;
  left: 0; 
  right: 0; 
  margin-left: auto;
  margin-right: auto; 


@keyframes my-animation {
  from {
    background-color: #ff3300;
    width: 300px;
    top: 10px;
  to {
    background-color: #006c17;
    width: 50px;
    top: 100px;

Review the below video.

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories