过渡 transtion 的使用方式

一定程度上也可以代替javascript实现一些动画效果。(CSS3)

• transition
  • 复合属性
• transition-property
  • 参与过渡的属性
• transition-delay
  • 过渡延迟时间执行
• transition-timing-function
  • 过渡的类型
• transition-duration
  • 参与过渡属性的持续时间

        <style>
			/* transition:有数值变化的css属性值
			 通常会和:hover 结合使用
			 all:检测所有css属性

			 */
			.transition{ 
				width:100px; 
				height:100px; 
				background:brown;
				transition-property:width ,height ,background ;/* 参与过渡属性 */
				transition-duration: 2s,3s,5s;/* 参与过渡属性的变化时间 */
				transition-delay: 1s;/* 过渡的延迟时间（1 秒钟后执行） */
				transition-timing-function: linear;/* 参与过渡类型（linear 匀速直线运动） */
			}
			.transition:hover{ width:200px; height:300px; background:yellow;}
			
		</style>
		<div class="transition"></div>