我希望我的图像大小能够在父容器大小发生变化时使用 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>
最佳答案
尝试将每个图像的宽度设置为 100%。
这是我用于图像动画的代码:
transition-property: width;
transition-duration: 1s;
-webkit-transition-property: width; /* Safari */
-webkit-transition-duration: 1s; /* Safari */
关于html - 使用 css3 更改容器高度/宽度时使图像大小动画化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21668011/