Reputation: 653
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>
Upvotes: 1
Views: 3081
Reputation: 274384
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>
Upvotes: 2
Reputation: 1287
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>
Upvotes: 1
Reputation: 9032
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>
Upvotes: 1