【CSS3】非同期アニメーション_html/css_WEB-ITnose-htmlチュートリアル-php.cn

【CSS3】非同期アニメーション_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:41:25

オリジナル

1378 人が閲覧しました

<!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 でテストするか、他のプレフィックスを自分で追加してください) ~.~)

著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。