css3 marquee

HTML结构以下：

<div class="marquee"><div><span>marquee标签拥有不少的动效，惋惜遭到HTML5废弃，本文利用css3模拟其水平滚动效果。</span></div></div>

本来一层DIV足够，又加了一层是为了增长左右的空白间隙。

而后就能够应用transform动画了：

.marquee {
    height: 36px;
    line-height: 36px;
    color: #f90;
    background-color: #ffc;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    box-sizing: border-box;
    word-break: break-all;
    white-space: nowrap;

    div {
        margin: 0 10px;
        overflow: hidden;
    }

    span {
        display: inline-block;
        padding-left: 100%;  /* 从右至左开始轮播 */
        -webkit-animation: marquee 16s linear infinite;
        animation: marquee 16s linear infinite;
    }
    span:hover { /* 鼠标点击时暂停轮播 */
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }
}

/* Make it move */
@-webkit-keyframes marquee {
    0%   { -webkit-transform: translate(0, 0); }
    100% { -webkit-transform: translate(-100%, 0); }
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

方案源于stackoverflow：css3-marquee-effect