<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><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>
点击 start 开始动画，stop 结束动画
(PS: 为了节省代码，只写了-webkit-前缀，所以在chrome中测试吧，或者自己加其它前缀 ~。~)
版权声明：本文为博主原创文章，未经博主允许不得转载。
