关键帧-CFANZ编程社区

关键帧

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	/*@-webkit-keyframes changeColor{
	from{background-color: red;width: 200px;}
	to{background-color: yellow;width: 400px;}
	}*/
	@-webkit-keyframes changeColor{
	10%{margin-left: 20px;}
	/*20%{background: yellow;}
	30%{background: olivedrab;}
	40%{background: pink;}*/
	50%{margin-left: 100px;}
	/60%{background: chocolate;}/
	100%{margin-left: 150px;}
	}

	#wrap{width: 200px;height:200px;background: red;
	}
	#wrap:hover{
	/animation: changeColor 3s ease-in-out;/
	animation-name: changeColor;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-delay: 1s;
	/animation-iteration-count:动画播放次数,infinite这个值表示一直播放/
	/animation-iteration-count: infinite;/
	/direction:alternate这个是往返,reverse:从最终状态往初始状态走/
	/animation-direction:reverse;/
	/fill-mode:决定动画的最终状态:forwards:停在结束的位置,backwards:动画结束后回到初始位置/
	animation-fill-mode: forwards;
	animation-play-state: paused;
	}

	</style>
	</head>
	<body>
	<div id="wrap"></div>
	</body>
	</html>

0 条评论