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

↘锁芯ラ 提交于 2019-11-30 07:30:20

先写一个样式:

	<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像素,没有过渡时间。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!