持续动画---css、js、jQuery

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>

来源：CSDN

作者：江醉鱼

链接：https://blog.csdn.net/me_never/article/details/103841812

标签

动画

动漫