轮播动画简单实现

现在的前端，越来越注重用户交互和体验，有很多动画和效果是很常见的，如本篇要讲的主题：轮播动画。这和以前经常听到的一个名词–”跑马灯“效果一样。在css3出来之前，都是通过javascript实现的动画，现在我们完全可以使用css3，性能有很大的提升，兼容性也已经很不错，尤其是移动端。

CSS3实现动画性能会有极大提升，特别是当页面动画较多或定时器较多时。

html结构：

    <h2>CSS实现</h2>    <p class="wrapper-css">        <p class="container-css marquee">            <p>今天</p>            <p>明天</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>            <p>后天</p>            <p>今天</p><!-- 辅助元素，为实现循环轮播 -->        </p>    </p>

可以看到，依然需要在后面添加一个重复辅助元素，实现循环轮播效果。

CSS代码：

    // 轮播动画        @-webkit-keyframes marquee {            0% {                -webkit-transform: translate3d(0, 0, 0);            }            27% {                -webkit-transform: translate3d(0, 0, 0);            }            33% {                -webkit-transform: translate3d(0, -100%, 0);            }            60% {                -webkit-transform: translate3d(0, -100%, 0);            }            67% {                -webkit-transform: translate3d(0, -200%, 0);            }            94% {                -webkit-transform: translate3d(0, -200%, 0);            }            100% {                -webkit-transform: translate3d(0, -300%, 0);            }        }        @keyframes marquee {            0% {                transform: translate3d(0, 0, 0);            }            /* 100/3 * (2s/2.5s) => 26.7% => 27% */            27% {                transform: translate3d(0, 0, 0);            }            /* 100/3 =>33.3 => 33% */            33% {                transform: translate3d(0, -100%, 0);            }            60% {                transform: translate3d(0, -100%, 0);            }            67% {                transform: translate3d(0, -200%, 0);            }            94% {               transform: translate3d(0, -200%, 0);            }            100% {                transform: translate3d(0, -300%, 0);            }        }        .wrapper-css {            width: 200px;            height: 30px;            margin: 10px;            overflow: hidden;        }        .container-css {            height: 30px;            -webkit-animation: marquee 7.5s linear infinite;/* 2.5s(2s + 0.5s) * 3 => 7.5s */            animation: marquee 7.5s linear infinite;        }        .container-css p {            width: 100%;            height: 30px;            margin: 0;            line-height: 30px;            font-size: 18px;        }

如上，我们使用CSS3定义动画关键帧，并结合transform位移实现无缝轮播动画，通过移动容器实现轮播效果，主要需要根据轮播元素计算动画关键帧点