css3用transtion属性实现动画效果

时间：5年前阅读：5985

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>  
	<style type="text/css">    
	#jrtj{    
		width: 200px;    
		height: 150px;    
		background: dodgerblue;    
		/*transition过渡的意思 3s 3秒的意思*/    
		/*transition: width 3s;*/    
		/*0.2s是延时0.2秒才开始动的意思   linear是匀速(相同速度开始至结)*/    
		/*transition:width 3s 0.2s  linear;*/    
		/*ease-in 开始的时候慢，之后快*/    
		/*transition:width 3s 0.2s  ease-in;*/    
		/*all比较费资源点*/    
		/*transition:width all 3s 0.2s  ease-in;*/    
		/*指定要监控的属性  property属性的意思*/    
		transition-property: width;    
		/*指定运动时间   duration持续的时间的意思*/    
		transition-duration: 2s;    
		/*指定延迟时间  delay延迟的意思*/    
		transition-delay:0.5s;    
		/*运动曲线   timing 定时的意思  function功 能，作用 */    
		transition-timing-function: ease-in;    
	}    
	#jrtj:hover{    
		width: 900px;    
	}    
	</style>    
</head>    
<body>    
	<div id="jrtj">    
	</div>    
</body>    
</html>

代码效果点上面的运行代码

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css3用transtion属性实现动画效果

网友评论