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% x 100%。
你仍然需要在图像之前将转换代码放在图像上它悬停 - 在悬停时，你只需要改变宽度和身高。

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

编辑：

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

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

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

Answer 2

您的 transition 代码有点不对劲，需要进行一些修改。

我不太确定您要将实际转换添加到什么，所以我添加了代码以在 img 或其容器上执行此操作，因此您有一些选择。

transitionCSS属性是所有transition属性，如持续时间、属性和样式。

我也不相信 Toastrackenigma 的回答是完全正确的，因为 CSS 转换不需要任何浏览器前缀 (See here on CanIUse.com)

最终，它只是有一点不正确的语法和转换中的缺失部分，告诉它它需要运行上的哪些元素。

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

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

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

<div class="pic to_size">
  <img src="http://lorempixel.com/300/300/city/" alt="VBpro" title="VBpro">
</div>

下面的评论是 OP 的最终解决问题，但这里是为其他人提供的，无需浏览大量评论。

JSFiddle

CSS 过渡无效

CSS transition not work

css

css-transitions