使用css3更改容器高度/宽度时使图像大小动画？

Question

我希望我的图像大小在父容器大小发生变化时使用 css3 过渡平滑地制作动画。

如果我为图像设置高度/宽度属性，css 可以正常工作——例如

transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-webkit-transition: all .8s ease-in-out;    

（简化）标记

<ul>
    <li><img src="myimage.png" style="width: 200px;"></li>

    <li><img src="myimage.png" style="width: 200px;"></li>

    <li><img src="myimage.png" style="width: 200px;"></li>
</ul>

但这似乎不起作用——它们只是跳转到下一个尺寸。

<ul style="width: 200px;">
    <li><img src="myimage.png"></li>

    <li><img src="myimage.png"></li>

    <li><img src="myimage.png"></li>
</ul>

Answer 1

尝试将每张图片的宽度设置为 100%。

这是我用于图像动画的代码：

transition-property: width;
transition-duration: 1s;
-webkit-transition-property: width; /* Safari */
-webkit-transition-duration: 1s; /* Safari */