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>