css - 带有 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() 的动画就像在下面的片段中一样。

使用优势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 即可完成。还。使用优势 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>