CSS3过渡动画 transition:all与transition区别

最新推荐文章于 2026-05-15 14:24:29 发布

原创最新推荐文章于 2026-05-15 14:24:29 发布 · 2.8w 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

本文为博主原创文章，未经博主允许不得转载。

收录于

CSS3心得整理专栏收录该内容

14 篇文章

订阅专栏

博客介绍了CSS中transition属性的使用。指出transition:all 1s与transition:1s效果相同，默认宽高同时过渡。还说明了transition带不带all的区别，如设置transition:width 1s时，鼠标滑过div宽有1秒动画，高则无过渡时间。

先写一个样式：

	<style>
		div{
		    width: 200px;
		    height: 200px;
		    margin: 100px auto;
		    background-color: #336699;
		    
		    /*transition:width 1s;*/
		    transition:all 1s;
		    /*transition: height 1s;*/
		}
		div:hover{
		    width: 300px;
		    height: 400px;
		}
	</style>

这里transition:all 1s 与transition:1s 是相同效果的，也就是说带不带all都会出现一样的效果，默认就是宽高会同时过渡。

我认为transition带不带all区别就是：transition：width|height。如果过度动画这里是transition:width 1s；则鼠标滑过div的宽会有1秒的动画，而高会立刻撑大为400像素，没有过渡时间。