【CSS3】异步动画_html/css_WEB-ITnose

#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}}startstop
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");}

登录后复制

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

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

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

立即学习“前端免费学习笔记（深入）”；