Html
    Css
    Js

    
                        
				.c1,.c2,.c3,.c4,.c5 {
	margin-top:10px;
	color:#fff;
}
.c1 {
	background:blue;
	width:100px;
	height:50px;
	transition:width 10s;
	transition-timing-function:linear;
}
.c:hover .c1 {
	width:1000px;
}
.c2 {
	background:blue;
	width:100px;
	height:50px;
	transition:width 10s;
	transition-timing-function:ease;
}
.c:hover .c2 {
	width:1000px;
}
.c3 {
	background:blue;
	width:100px;
	height:50px;
	transition:width 10s;
	transition-timing-function:ease-in;
}
.c:hover .c3 {
	width:1000px;
}
.c4 {
	background:blue;
	width:100px;
	height:50px;
	transition:width 10s;
	transition-timing-function:ease-out;
}
.c:hover .c4 {
	width:1000px;
}
.c5 {
	background:blue;
	width:100px;
	height:50px;
	transition:width 10s;
	transition-timing-function:ease-in-out;
}
.c:hover .c5 {
	width:1000px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3transition运动效果对比

0