The animation attribute in css3 implements the code for the arrow to scroll to the right and fade away-CSS Tutorial-php.cn

The animation attribute in css3 implements the code for the arrow to scroll to the right and fade away

不言

Release： 2018-08-10 11:42:56

Original

3131 people have browsed it

This article introduces to you the code for the animation attribute in CSS3 to realize the arrow scrolling to the right and fading. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

This is a small icon with a right arrow.

keyframes Create a css3 animation called animation and use delayed animation to create a uniform scrolling effect.

Paste the html code directly, copy and run.

<!DOCTYPE html>
<html dir="ltr">
<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="" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_695050_qf5jdjknto.css">
<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;}
     
</style>
 
 
</head>
 
<body>
 
<!-- Wrapper -->
<div> 
 
    <!-- Header -->
    <header id="header"></header>
    <!-- #Header end -->
 
 
    <!-- Content -->
    <section id="content">
 
        <div>
 
            <div>
 
                <!-- 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>

Copy after login

Related recommendations:

Detailed explanation of animation properties of css3 (with code)

How to make arrows with css? (Code example for arrows in different directions)

The above is the detailed content of The animation attribute in css3 implements the code for the arrow to scroll to the right and fade away. For more information, please follow other related articles on the PHP Chinese website!