ホームページ >ウェブフロントエンド >htmlチュートリアル >【CSS3】非同期アニメーション_html/css_WEB-ITnose
【CSS3】非同期アニメーション_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:251391ブラウズ
<!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>
アニメーションを開始するには「開始」をクリックし、アニメーションを終了するには「停止」をクリックしてください
(PS: コードを保存するために、-webkit- プレフィックスのみを記述したため、Chrome でテストするか、他のプレフィックスを自分で追加してください) ~.~)
著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。