CSS animation is not smooth, it is shaking

Question

here is simple image css animation from width and height but it is shaking / vibrate on change of width and height not smooth what am i missing ? can i know ?

i want this should be change smoothly.

My Code is:

.content {
  overflow: hidden;
  position: relative;
  width: 500px;
  height: 300px;
  border: 4px solid red;
  text-align : center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainimg 
{
border: 3px solid black;
}


img {width:100%; height:100%; }


/*zoom-out-to-zoom-in keyframe**/

.zoom-out-to-zoom-in{
  animation: zoom-out-to-zoom-in linear 8s;
  animation-direction: alternate;  
  animation-iteration-count: 4;

}

@keyframes zoom-out-to-zoom-in{
0% {
  width: 40%;
  height: 40%;
  }

  5% {
   width: 60%;
  height: 60%;
  }

  100% {
   width: 90%;
  height: 90%;
  }
}

<div class="content">
      <div class="mainimg zoom-out-to-zoom-in">
    <img class="left-to-right" src="https://c.ndtvimg.com/2021-01/qt2601i8_pm-modi-davos_625x300_28_January_21.jpg">
</div></div>

Answer 1

The issue is related to the fact that you are centring the element so each size change will create the shake effect because you will trigger the centring.

Try a transform animation instead. It should be better:

.content {
  overflow: hidden;
  position: relative;
  width: 500px;
  height: 300px;
  border: 4px solid red;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainimg {
  border: 3px solid black;
}

img {
  width: 100%;
  height: 100%;
  display:block;
}


/*zoom-out-to-zoom-in keyframe**/

.zoom-out-to-zoom-in {
  animation: zoom-out-to-zoom-in linear 8s;
  animation-direction: alternate;
  animation-iteration-count: 4;
}

@keyframes zoom-out-to-zoom-in {
  0% {
    transform:perspective(100px) translate3d(0,0,-80px);
  }
  5% {
    transform:perspective(100px) translate3d(0,0,-40px);
  }
  100% {
    transform:perspective(100px) translate3d(0,0,-10px);
  }
}

<div class="content">
  <div class="mainimg zoom-out-to-zoom-in">
    <img class="left-to-right" src="https://c.ndtvimg.com/2021-01/qt2601i8_pm-modi-davos_625x300_28_January_21.jpg">
  </div>
</div>

Answer 2

It's actually pretty simple. You force your square image to be a rectangle by giving it following CSS rules:

  100% {
  width: 400px;
  height: 250px;
  }

If you make something like:

  100% {
  width: 400px;
  height: 400px;
  }

your image will not shake that much. Of course you have to adjust the sizes on your container size.

Basically all the sizes have to be valid. It's the same when scaling an 16:9 image to 4:3 format. It will shake, if you don't adjust the image by cutting it into the correct format.

Increasing the height of your container to 500px yiu have the following:

.content {
  overflow: hidden;
  position: relative;
  width: 500px;
  height: 500px;
  border: 4px solid red;
  text-align : center;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.mainimg 
{
border: 4px solid black;
}


img {width:100%; height:100%; image-rendering: pixelated; }


/*zoom-out-to-zoom-in keyframe**/

.zoom-out-to-zoom-in{
  animation: zoom-out-to-zoom-in linear 3s;
  animation-direction: alternate;  
  animation-iteration-count: 1;

}

@keyframes zoom-out-to-zoom-in{
0% {
  width: 100px;
  height: 100px;
  }

  5% {
  width: 200px;
  height: 200px;
  }
 
  100% {
  width: 400px;
  height: 400px;
  }
} 

<div class="content">
      <div class="mainimg zoom-out-to-zoom-in">
    <img class="left-to-right" src="https://pbs.twimg.com/profile_images/3507963424/c335309ba957f38976b532d84149cb4b.jpeg">
</div></div>

Answer 3

You are trying to change the aspect ratio of your image while streching the image at the same time. There's no way your browser will make this transition "smooth" even with Javascript.

You may try to use background-image insteed using cover. While not perfect at all it may be a little improvment and, at least, your image won't be deformed.

.content {
  overflow: hidden;
  position: relative;
  width: 500px;
  height: 300px;
  border: 4px solid red;
  text-align : center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mainimg 
{
border: 4px solid black;
}
img {width:100%; height:100%; }


/*zoom-out-to-zoom-in keyframe**/

.zoom-out-to-zoom-in {
  animation: zoom-out-to-zoom-in linear 3s;
  animation-direction: alternate;  
  animation-iteration-count: 1;
  
  animation-fill-mode: forwards;
background-image:url(https://pbs.twimg.com/profile_images/3507963424/c335309ba957f38976b532d84149cb4b.jpeg);
background-size:cover;
}

@keyframes zoom-out-to-zoom-in{
0% {
  width: 100px;
  height: 100px;
  }

  5% {
  width: 200px;
  height: 200px;
  }

  100% {
  width: 400px;
  height: 250px;
  }
}

<div class="content">
      <div class="mainimg zoom-out-to-zoom-in">
   
</div></div>