使用CSS3动画缩放图像 [英] Scale of image with CSS3 animation

问题描述

我尝试缩放图像像灯箱。当运行图像的大小改变，但没有动画。

I try to scale of image like light box. When run the size of image changed but with out animation.

<div id="dnn_ctr428_ContentPane" class="img-rectangular"><div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
    <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
    <img alt="" src="/dnn_test/portals/0/Images/logo2.png?ver=1394-08-24-081741-293">
</div>

</div></div>

css：

.img-rectangular:hover img {

    width: 120%;
    height: 120%;
    -webkit-transition: width 2000ms ease-in-out;
    -moz-transition:    width 2000ms ease-in-out;
    -ms-transition:     width 2000ms ease-in-out;
    -o-transition:      width 2000ms ease-in-out;
    transition:         width 2000ms ease-in-out;
}

推荐答案

如果要缩放图像，而且必须通过动画，那么您可以使用 transform：scale（）如下面的代码段。

If you want to scale the image while hovering on the container and it must be via an animation then you could use an animation with transform: scale() like in the below snippet.

使用 scale（）转换而不是宽度的优势和 height 更改是实际上不需要设置初始高度和宽度。

Advantage of using scale() transforms as opposed to width and height change is that it doesn't really require a set initial height and width.

/*.img-rectangular img {
  width: 200px;
  height: 200px;
}*/
.img-rectangular:hover img {
  transform-origin: left top;
  animation: scale 2000ms ease-in-out forwards;
}
@keyframes scale {
  to {
    transform: scale(1.2);
  }
}

<div id="dnn_ctr428_ContentPane" class="img-rectangular">
  <div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
    <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
      <img alt="" src="http://lorempixel.com/400/400/nature/1">
    </div>

  </div>
</div>

但是，动画不是真的需要这个，它可以通过 transition 。使用 transition 而不是动画的优点是，默认的转换会产生反向（缩小）效果鼠标悬停在动画上，而动画需要不同的关键帧设置来实现。

However, animation is not really required for this one and it can be done with just transition also. The advantage of using transition as opposed to an animation would be that transitions by default produce the reverse (downscale) effect on hover out while animation would require a different keyframe setting to achieve it.

.img-rectangular img{
  /*width: 200px;
  height: 200px;*/
  transition: transform 2000ms ease-in-out;
  transform-origin: left top;
}
.img-rectangular:hover img {
  transform: scale(1.2);
}

<div id="dnn_ctr428_ContentPane" class="img-rectangular">
  <div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
    <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
      <img alt="" src="http://lorempixel.com/400/400/nature/1">
    </div>

  </div>
</div>

这篇关于使用CSS3动画缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！