Css3用animation和keyframes实现动画

时间：4年前阅读：5222

1、定义运动规则 keyframes关键帧 name名字

2、定义运动规则 keyframes关键帧 run名字 from 从什么时候开始 to 到什么时候结束

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    
	#jrt{    
		width: 400px;    
		height: 300px;    
		background: blue;    
		/*animation 动画片制作   run  移动*/    
		/*animation: run 3s;*/    
		/*linear是匀速 0.5s延迟时间  循环次数3  后面改成infinite就是无限次循环*/    
		/*参数：要绑定的运动名称，运动持续时间 ,运动曲线,延迟时间,重复次数,是否轮流反向播放动画*/    
		/*animation: run 3s linear 0.5s 3;*/    
		animation: run 3s infinite;    
	}    
	/*定义运动规则  keyframes关键帧   name名字*/    
	/*@keyframes name{    
	}*/    
	/*定义运动规则  keyframes关键帧   run名字     from  从什么时候开始  to 到什么时候结束*/    
/*	@keyframes run{    
		from{    
			width: 300px;    
			height: 150px;    
		}    
		to{    
			width: 900px;    
			height: 500px;    
		}    
	}*/    
	/*也可以用百分比来表示  这个50% 是上面时间3s的50%*/    
	@keyframes run{    
		0%{    
			width: 300px;    
		}    
		50%{    
			width: 900px;    
		}    
		100%{    
			width: 300px;    
		}    
	}    
	</style>    
</head>    
<body>    
	<div id="jrt">    
	</div>    
</body>    
</html>

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

微信扫码关注

更新实时通知

Css3用animation和keyframes实现动画

网友评论