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