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 */

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

1 个答案: