带有 CSS3 动画的图像比例

Question

我尝试像灯箱一样缩放图像。运行时图像的大小发生了变化，但没有动画。

<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;
}

Answer 1

如果您想在将鼠标悬停在容器上时缩放图像并且必须通过animation，那么您可以使用带有transform: scale() 的动画，如下面的sn-p。

使用scale() 变换相对于width 和height 变化的优势在于它实际上并不需要设置初始高度和宽度。

/*.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>

---

但是，animation 并不是真正需要的，也可以只使用 transition 来完成。与animation 相比，使用transition 的优势在于，默认情况下过渡会在悬停时产生反向（缩小）效果，而动画则需要不同的关键帧设置才能实现。

.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>

Answer 2

使用过渡时，您必须设置一个初始值和一个要过渡到的附加值。

所以看来问题是你没有设置图片宽度的初始值。

试试这样的：

img {
    width: 100%; /* initial value for width */
    transition: width 2s ease-in-out;
}

.img-rectangular:hover img {
    width: 120%; /* on hover transition to this value */ 
    height: 120%;    
}

FIDDLE

img {
  width: 100%;
  transition: width 2s ease-in-out;
}
.img-rectangular:hover img {
  width: 120%;
  height: 120%;
}

<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://placehold.it/350x150">
    </div>

  </div>
</div>