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

---

图像的比例使用CSS3动画进行更改，或者图像的大小发生变化但没有动画效果。这两种情况哪一种是正确的？ - Harry

我不理解这两者是如何相同的。你是在说你现在的代码是没有动画的，但你想要它有动画效果吗？ - Harry

好的，但是为什么你特别需要它与动画一起使用呢？在悬停时过渡效果应该足以缩放图像。 - Harry

我想展示一个效果，这是美丽的。 - hmahdavi

Answer 1

如果您想要在鼠标悬停在容器上时缩放图像，并且必须通过animation实现，则可以使用带有transform: scale()的动画，例如下面的片段。

使用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

---

谢谢你的解决方案 :) - G.L.P

Answer 2

当使用过渡效果时，必须设置初始值和想要过渡到的附加值。

因此，问题似乎是您没有为图像宽度设置初始值。

尝试像这样做：

```html ``` 请注意，您需要将样式属性添加到您的HTML标记中。

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

演示

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>

- Danield

---

是的，没错。高度和宽度的过渡需要一个初始值（而像我回答中的缩放不需要，因为默认缩放为1）。无论如何，感谢你指出了这一点，这是我在回答中忽略掉的 :) - Harry

Answer 3

<img src="http://placehold.it/350x150" class="image">

.image {
   width : 100%;
   height: 100%;
}

.image:hover {
  transform: scale(1.2);
  transition: transform 0.5s ease-in-out;
}

- Sashini Hettiarachchi