html - 使用 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 */