CSS3特效之过度transition

transition

语法

 
 
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
transition-property：all | none | <property>[ ,<property> ]*：设置对象中的参与过渡的属性,默认值为all
transition-duration：<time>[ ,<time> ]*：设置对象过渡的持续时间，默认值为0
transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )[,重复]*：设置对象中过渡的动画类型
transition-delay：<time>[ ,<time> ]*：设置对象延迟过渡的时间

悬停切换背景

悬停切换背景

 
 
.transition-1{ 
	padding:10px 20px; 
	background-color:#f00; 
	-webkit-transition:background 1s linear; 
	-moz-transition:background 1s linear; 
	transition:background 1s linear; 
}
.transition-1:hover{ 
	background-color:#009; 
	color:#fff; 
}

悬停旋转

旋转

 
 
.transition-2{ 
	width:100px; 
	height:100px; 
	line-height:100px; 
	text-align:center; 
	border-radius:50px/50px; 
	background-color:orange; 
	-webkit-transition:all 1s linear; 
	-moz-transition:all 1s linear; 
	transition:all 1s linear; 
}
.transition-2:hover{ 
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg); 
	transform:rotate(360deg); 
}

悬停缩放

放大

 
 
.transition-3{ 
	width:100px; 
	height:100px; 
	line-height:100px; 
	text-align:center; 
	background-color:#369; 
	-webkit-transition:all .5s linear; 
	-moz-transition:all .5s linear; 
	transition:all .5s linear; 
}
.transition-3:hover{ 
	-webkit-transform:scale(1.2); 
	-moz-transform:scale(1.2); 
	transform:scale(1.2); 
}

组合过渡效果悬停测试效果

抱猫睡觉的鱼

 
 
.transition-4{ 
	width:100px; 
	height:100px; 
	line-height:100px; 
	text-align:center; 
	border-radius:50px/50px;
	background-color:#963; 
	-webkit-transition:all 1s linear; 
	-moz-transition:all 1s linear; 
	transition:all 1s linear;
}
.transition-4:hover{ 
	background-color:#909; 
	color:#fff; 
	box-shadow:0 0 20px rgba(0,0,0,.7); 
	-webkit-transform:rotate(720deg) scale(2); 
	-moz-transform:rotate(720deg) scale(2); 
	transform:rotate(720deg) scale(2); 
}