图像加载时将图像从零放大到完整大小 [英] Enlarge an image from zero to full size on image load

问题描述

我要随机放置气泡图像，我想通过将图像从零放大到全尺寸来模拟气泡的效果.我正在使用CSS transform:scale();，但是我想在图像加载时触发动画.

I'm placing images of a bubble randomly and I want to simulate the effect of making the bubble by enlarging the image from zero to full size. I'm using CSS transform:scale(); but I want to trigger the animation when the image loads.

推荐答案

您可以在图像加载完成后向图像添加一个类，并在CSS中指定正确的transition和transform规则.

You can add a class to the image when it finishes loading, and specify proper transition and transform rules in CSS.

$("img").load(function() {
  $(this).addClass("loaded");
});

img {
  transition: transform 1s;
  transform: scaleX(0) scaleY(0);
}
img.loaded {
  transform: scaleX(1) scaleY(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://lorempixel.com/600/600/">

这篇关于图像加载时将图像从零放大到完整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！