云端漂移

Whatever you want to do, wherever you want to go, it's truely upto you.

【CSS3】异步动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation-play-state</title>
	<style>
	#dot,#dot1 {
		position: absolute;
		display: inline-block;
		width: 20px;
		height: 20px;
		top:-20px;
		border-radius: 50%;
		background-color: #389;
		-webkit-animation-play-state: paused;
	}
	#dot{left:0}
	#dot1{right:0}
	#dot.animate {
		left:300px;
		-webkit-animation:fadeIn 2s, float 2s 2s infinite;
		-webkit-animation-play-state: running;
		/*-webkit-animate: shake 4s 2s both infinite paused;  简写在IE10/11中会挂掉*/
	}
	#dot1.animate {
		top:450px;
		-webkit-animation:fadeInr 1.5s, floatr 3s 1.5s infinite;
		-webkit-animation-play-state: running;
	}
	@-webkit-keyframes fadeIn {
		0% {opacity: 0; top:0; left:0;}
		100% {opacity: 1; top:400px; left:300px;}
	}
	@-webkit-keyframes float {
		0% {top: 400px}
		45% {top: 370px}
		100% {top: 400px}
	}

	@-webkit-keyframes fadeInr {
		0% {opacity: 0; top:0; right:0;}
		100% {opacity: 1; top:450px; right:300px;}
	}
	@-webkit-keyframes floatr {
		0% {right: 300px}
		60% {right: 350px}
		100% {right: 300px}
	}
	</style>
</head>

<body>
<a href="javascript:void(0);" onclick="start();" id="start">start</a>
<a  href="javascript:void(0);" onclick="stop();" id="stop" style="display:none">stop</a>

<div id="dot"></div>
<div id="dot1"></div>

<script>
function start() {
	var dot = document.getElementById("dot"),
		dot1 = document.getElementById("dot1"),
		start = document.getElementById("start"),
		stop = document.getElementById("stop");

	start.style.display = "none";
	stop.style.display = "block";

	dot.setAttribute("class","animate");
	dot1.setAttribute("class","animate");
}

function stop() {
	var dot = document.getElementById("dot"),
		dot1 = document.getElementById("dot1"),
		start = document.getElementById("start"),
		stop = document.getElementById("stop");

	start.style.display = "block";
	stop.style.display = "none";

	dot.removeAttribute("class");
	dot1.removeAttribute("class");
}
</script>
</body>
</html>


点击 start 开始动画,stop 结束动画

(PS: 为了节省代码,只写了-webkit-前缀,所以在chrome中测试吧,或者自己加其它前缀 ~。~)


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jean_lee/article/details/46830433
个人分类: css diary
上一篇【css--Form】字体为12px时表单中(radio,checkbox)与文字对齐
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭