CODEWITHSUNDEEP
css
tester
tester

Reputation: 459

Zoom in animation effect is not working correctly using css

I have added css code for animation zoomin its working fine but the problem is i haven't written code for zoom out but the image is showing for both zoomin and zom out.

<div class="slotholder"><img src="http://www.server.com/fhdfsmile/wp-content/uploads/2018/11/slider01.jpg"></div>
.slotholder {
webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-animation: zoomin 0s ease-in infinite;
animation: zoomin 30s ease-in infinite;

 }
  @-webkit-keyframes zoomin {
  0% {transform: scale(1);}
  50% {transform: scale(1.5);}
  100% {transform: scale(1);}
   }
  @keyframes zoomin {
  0% {transform: scale(1);}
 50% {transform: scale(1.5);}
 100% {transform: scale(1);}
  }

i have written css for zoom in but it is coming for zoom out also.I dont want zoom out option only the image need to be zoomed.

Upvotes: 1

Views: 2131

Answers (1)

zer00ne
zer00ne

Reputation: 43910

Changes

  • Replace infinite with forwards

  • @keyframes are progressive so when it was:

    @keyframes zoomin {
  0% {
    transform: scale(1);
  }
  50% {
    /* Changed to 1.25 */
    transform: scale(1.5);
  }
  100% {
    /* Changed to 1.5 */
    transform: scale(1);
  }
}

    At the beginning 0% it was normal size scale(1), then halfway 50% it was bigger scale(1.5), but at the end 100% it shrunk back down to normal size scale(1).

  • transform-origin: top left was added to position the image to avoid cropping.

Demo

.slotholder {
  animation: zoomin 10s ease-in forwards;
  transform-origin: top left;
}

@keyframes zoomin {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1.5);
  }
}
<div class="slotholder"><img src="https://smileaz.com/wp-content/uploads/sites/45/2018/07/types-of-dentures.jpg" width='300'></div>

Upvotes: 1

Related Questions