原文地址： https://blog.csdn.net/ange2017/article/details/81537977
箭头动态移动效果
找了很多，只有这个感觉满意
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="webhivers" />
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>arrow-right</title>
<style>
.container { width: 1000px;margin: 0 auto; }
@keyframes move {
0% {left: 0%; opacity: 0; }
70% { left: 70%; opacity: 1 }
100% {left: 100%;opacity: 0;}
}
.move{-webkit-animation-name:move;animation-name:move;position:relative;margin-left:-16px;}
.ar-animated{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;font-style:inherit;-webkit-animation-timing-function:linear;animation-timing-function:linear;}
.ar-delay-1s{animation-delay:0.1s;}
.ar-delay-2s{animation-delay:0.2s;}
.ar-delay-3s{animation-delay:0.3s;}
.ar-delay-4s{animation-delay:0.4s;}
.ar-delay-5s{animation-delay:0.5s;}
.ar-delay-6s{animation-delay:0.6s;}
.ar-delay-7s{animation-delay:0.7s;}
.ar-delay-8s{animation-delay:0.8s;}
.ar-delay-9s{animation-delay:0.9s;}
.ar-delay-10s{animation-delay:0.10s;}
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_695050_qf5jdjknto.eot?t=1533721970675'); /* IE9*/
src: url('//at.alicdn.com/t/font_695050_qf5jdjknto.eot?t=1533721970675#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('//at.alicdn.com/t/font_695050_qf5jdjknto.ttf?t=1533721970675') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_695050_qf5jdjknto.svg?t=1533721970675#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-icon1:before { content: "\e61f"; }
.icon-twitter:before { content: "\ec5f"; }
.icon-fangdajing:before { content: "\e60b"; }
.icon-facebook:before { content: "\e6d4"; }
.icon-you:before { content: "\e628"; }
.icon-iconset0416:before { content: "\e727"; }
.icon-subscribe:before { content: "\e608"; }
.icon-wechat:before { content: "\e66a"; }
.icon-arrow-right:before { content: "\e609"; }
.icon-yeji-:before { content: "\e600"; }
.icon-weibo:before { content: "\e69c"; }
.icon-kuajingtouzi:before { content: "\e601"; }
.icon-lianxiwomen:before { content: "\e602"; }
.icon-shougoujianbing:before { content: "\e603"; }
.icon-yinhangjinrong:before { content: "\e604"; }
.icon-zhengyijiejue:before { content: "\e605"; }
.icon-fahangshangshi:before { content: "\e606"; }
.icon-dichangongcheng:before { content: "\e607"; }
</style>
</head>
<body>
<!-- Wrapper -->
<div>
<!-- Header -->
<header id="header"></header>
<!-- #Header end -->
<!-- Content -->
<section id="content">
<div class="content-wrap">
<div class="container">
<!-- HTML CODE HERE -->
<div>
<!-- <span class="move animated">>>>>>></span> -->
<span style="width:35px;display: block">
<!-- <i class="move animated delay-7s iconfont icon-arrow-right"></i>
<i class="move animated delay-6s iconfont icon-arrow-right"></i>
<i class="move animated delay-5s iconfont icon-arrow-right"></i> -->
<i class="move ar-animated ar-delay-4s iconfont icon-arrow-right"></i>
<i class="move ar-animated ar-delay-3s iconfont icon-arrow-right"></i>
<i class="move ar-animated ar-delay-2s iconfont icon-arrow-right"></i>
<i class="move ar-animated ar-delay-1s iconfont icon-arrow-right"></i>
<i class="move ar-animated iconfont icon-arrow-right"></i>
</span>
</div>
</div>
</div>
</section>
<!-- #Content end -->
<!-- Footer -->
<footer id="footer"></footer>
<!-- #Footer end -->
</div>
<!-- #Wrapper end -->
</body>
</html>