【CSS3】异步动画

原创 2015年07月10日 14:38:16
<!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中测试吧,或者自己加其它前缀 ~。~)


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

深入理解CSS3 Animation 帧动画(step详解)

CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术。 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关...

27个精致的CSS3动画效果

  • 2017-08-23 09:08
  • 62.53MB
  • 下载

HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

HTML5正在变得越来越流行。在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近,Adobe宣布Flash将不再支持移动设备。这意味着,Adobe自身...

好玩的css3动画效果

CSS3日食示意图动画

CSS3----动画animation

属性: 属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性,除了 an...
  • damys
  • damys
  • 2014-08-29 09:46
  • 3464
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)