实例 transition-timing-function [过渡效果]

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE HTML>							
<html>							
	<head>							
		<meta charset="utf-8">							
		<title>实例
		</title>								
	<script type="text/javascript" src="https://ku.shouce.ren/libs/jquery/1/jquery1.7.2.min.js"></script>
</head>							
	<body>							
		<style type="text/css">.demo_box{
			border:1px solid #3DA5DC;
			background:#a4dcf9;
			height:100px;
			width:200px;
			text-align:center;
			color:#fff;
			}
			.demo_box{
				-webkit-transition:all 2s 0.5s;
				-moz-transition:all 2s 0.5s;
				position:relative;
				left:10px;
				width:50px;
				height:50px;
				border-radius:50px;
				margin:10px 0;
				overflow:hidden;
			}
			.ease{
				-webkit-transition-timing-function:ease;
				-moz-transition-timing-function:ease;
			}
			.linear{
				-webkit-transition-timing-function:linear;
				-moz-transition-timing-function:linear;
			}
			.ease-in{
				-webkit-transition-timing-function:ease-in;
				-moz-transition-timing-function:ease-in;
			}
			.ease-out{
				-webkit-transition-timing-function:ease-out;
				-moz-transition-timing-function:ease-out;
			}
			.ease-in-out{
				-webkit-transition-timing-function:ease-in-out;
				-moz-transition-timing-function:ease-in-out;
			}
			.cubic-bezier{
				-webkit-transition-timing-function:cubic-bezier(0.52,0,0.58,1.0);
				-moz-transition-timing-function:cubic-bezier(0.52,0,0.58,1.0);
			}
			.run{
				left:500px;
			}
		</style>
		<div class="demo_box ease">ease
		</div>
		<div class="demo_box linear">linear
		</div>
		<div class="demo_box ease-in">ease-in
		</div>
		<div class="demo_box ease-out">ease-out
		</div>
		<div class="demo_box ease-in-out">ease-in-out
		</div>
		<div class="demo_box cubic-bezier">cubic-bezier(0.52,0,0.58,1.0)
		</div>
		<input type="button" id="run" value="运行" style="margin:10px 10px;" />
		<script>
			$(function(){
				$("#run").toggle(function(){
					$(".demo_box").addClass("run");
					$(this).val("返回");
				}
								 ,function(){
					$(".demo_box").removeClass("run");
					$(this).val("运行");
				}
								);
			}
			 );
		</script>
	</body>				        
</html>

​x
 
<!DOCTYPE HTML>                         
<html>                          
    <head>                          
        <meta charset="utf-8">                          
        <title>实例
        </title>                                
    <script type="text/javascript" src="https://ku.shouce.ren/libs/jquery/1/jquery1.7.2.min.js"></script>
</head>                         
    <body>                          
        <style type="text/css">.demo_box{
            border:1px solid #3DA5DC;
            background:#a4dcf9;
            height:100px;
            width:200px;
            text-align:center;
            color:#fff;
            }
            .demo_box{
                -webkit-transition:all 2s 0.5s;
                -moz-transition:all 2s 0.5s;
                position:relative;
                left:10px;