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

原文由 hmahdavi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

 /*.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 来完成。使用 transition 而不是 animation 的优势在于，默认情况下，过渡会在悬停时产生反向（缩小）效果，而动画则需要不同的关键帧设置才能实现。

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

原文由 Harry 发布，翻译遵循 CC BY-SA 3.0 许可协议