css實現持續動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css動畫</title>
<style>
div
{
width:200px;
height:200px;
background:red;
position:relative;
animation:myfirst 2s infinite linear;
/*-webkit-animation:myfirst 5s; Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注意:</b> 該實例在 Internet Explorer 9 及更早 IE 版本是無效的。</p>
<div></div>
</body>
</html>
js實現持續動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js動畫</title>
</head>
<body>
<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
<script>
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("test");
var progress = 0;
function step(timestamp) {
progress += 1;
ele.style.width = progress + "%";
ele.innerHTML = progress + "%";
if (progress < 100) {
requestAnimationFrame(step);
}else{
progress = 0;
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
</script>
</body>
</html>
jQuery實現持續動畫
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<button>開始</button>
<div></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$('button').on('click',function () {
$('div').animate({left:1000},2000)
.animate({top:300}, 2000)
.animate({left:0,top:300},2000)
.animate({left:0,top:50},2000,function () {
//觸發事件
// $('button').trigger('click')
$('button').click()
})
})
</script>
</body>
</html>