Question

CSS过渡如何实现平滑的逆过渡

http://www.w3school.com.cn/css3/css3_transition.asp 这个链接的彩色方框CSS3过渡效果是没用JAVASCRIPT也可以做到的么？鼠标移动到元素上的过渡已经会了，但是如何做到上面链接中鼠标又从元素中移到元素外面的逆过渡（假设上面设定了1S完成过渡，如果鼠标移动到元素0.5S后移除，如何达到比较平滑的逆过渡效果）

Answer 1

CSS3样式，ClassName = animate
<style> 
.animate{
	width:65px;
	height:40px;
	background:#92B901;
	color:#ffffff;
	position:absolute;
	font-weight:bold;
	font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
	padding:20px 10px 0px 10px;
	display:blcok;
	margin:5px;
	-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
	-webkit-border-radius:5px;
	-o-transition-property:width,height,-o-transform,background,font-size,opacity;
	-o-transition-duration:1s,1s,1s,1s,1s,1s;
	-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
	-moz-transition-duration:1s,1s,1s,1s,1s,1s;
	transition-property:width,height,transform,background,font-size,opacity;
	transition-duration:1s,1s,1s,1s,1s,1s;
	border-radius:5px;
	opacity:0.4;
	}

.animate:hover{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
	opacity:1;
	background:#1ec7e6;
	width:90px;
	height:60px;
	font-size:16px;
	}
</style>

HTML

<a href="javascript:;" class="animate">鼠标移动到我这里</a>

全程css3，无需javascript。(需要支持css3的浏览器才能看到效果。)

希望能帮助到你。