【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】transition过渡和animation动画

写在前面的话: 之前实习的时候,刚开始的第一个月就是在研究CSS3的动画,因为要做转盘抽奖活动,预研的时候,我是用Canvas来画的,当时为了一个问题“如何使用canvas让图片围绕中心点旋转”折...

css3动画效果

  • 2017年12月13日 13:52
  • 11.76MB
  • 下载

如何使用css3绘制任意角度扇形+动画

本文参考自: http://jingyan.baidu.com/article/c910274be4dd69cd371d2d48.html 这里只是做下原理解释 原理:使用两个半圆做角度拼接。 ...
  • broust
  • broust
  • 2015年12月04日 16:21
  • 7246

CSS3自行车动画特效

  • 2017年10月31日 16:25
  • 4KB
  • 下载

27个精致的CSS3动画效果

  • 2017年08月23日 09:08
  • 62.53MB
  • 下载

第四课:css3-圆角 | 文本属性(文本超出部分省略) | 过渡transition | 动画animation

一、圆角|文本属性 1、知识点汇总 a、border-radius: 百分比 | px;当大于或等于正方形盒子宽度的一半就变成了圆; b、border-image: 兼容性不是很好,不做整理; c、...

好玩的css3动画效果

  • 2017年08月22日 00:33
  • 6KB
  • 下载

CSS3日食示意图动画

  • 2017年08月23日 12:47
  • 1KB
  • 下载

一步一步用CSS3实现简单的Loading动画效果

一步一步用CSS3实现简单的Loading动画效果基本思路 用css3实现一个深灰色的圆环 把圆环上四分之一的颜色变成蓝色 让圆环转起来 现在开搞了 html标签很简单,就一句 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【CSS3】异步动画
举报原因:
原因补充:

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