CSS 过渡不起作用

Question

这是我的代码:

.pic {
  width: 150px;
  height: 150px;
  overflow: hidden;
  margin: auto;
  border: 2px white solid;
  box-shadow: 0px 0px 0px 1px #E0DDDD;
  transition: 1s;
}
.pic img:hover {
  width: 100%;
  height: 100%;
  transition: 1s;
  transition-timing-function: ease-in-out;
  border: 2px red solid;
}
.pic img {
  transition: 1s;
}

<div class="pic">
  <img src="./core/image.php?userid=1&amp;dateline=1356257261" alt="VBpro" title="VBpro">
</div>

为什么转换在我的代码中不起作用？如何解决这个问题？

Answer 1

您的代码存在一些问题:

• 您尚未定义要转换的内容。您刚刚说了 transition:1s;，它告诉浏览器……什么也没有。例如，如果您想更改图像的不透明度，您可以编写 transition:opacity 1s;。
• 将转换代码放在转换不会运行的元素上。然后，只需更改您想要转换的属性，浏览器就会完成剩下的工作。

这是一个工作演示:https://jsfiddle.net/q3nj9n54/

另外，请阅读 this .

编辑:

@ali-b 既然我知道你想要在(宽度和高度)之间转换什么，那么完成这项工作应该更容易。

• 要为多个属性设置动画，您需要在 transition 属性中用逗号分隔它们。
• 此外，目前，您定义的宽度和高度属性在 .pic 元素上，不是图像 - 您必须想要动画在正确的属性上:P
• 关于这一点，您需要 .pic 比 150px 大 150px，否则过渡不会有任何变化 - 图片已经100% 乘以 100%。
• 您仍然需要在图像悬停之前将转换代码放在图像上 - 在悬停时，您只需更改宽度和高度。

这是宽度和高度之间过渡的另一个 fiddle :https://jsfiddle.net/2j423dn5/

编辑:

现在我得到你想要的了:D

我为错误的元素设置了动画。

这将解决您的问题:https://jsfiddle.net/2j423dn5/2/