最近实现手机端小游戏，看到有同事用到老掉牙的marquee标签，就不说html5已经废弃此标签了，单是性能就已经够呛，于是想换种实现方案，第一想法自然是js实现，当然也是最为灵活的，这里不再赘述。

期间曾看到有相关文章描述overflow实现的Marquee，用法如下：

overflow:-webkit-marquee;

尝试一下并无效果，最后发现30+的chrome版本中，Google已经把这玩意移除了。

另外就是今天的主角——CSS3 animation，依然很简单：

 .marquee {
     margin: 0 auto;
     white-space: nowrap;
     overflow: hidden;
     box-sizing: border-box;
 }

 .marquee span {
     display: inline-block;
     padding-left: 100%;
     animation: marquee 15s linear infinite;
 }

 .marquee span:hover {
     animation-play-state: paused
 }

<p class="marquee"><span>测试文本</span></p>

需要注意的是，这里有用到

animation: marquee 15s linear infinite;

即，15s内播放完一次，无限次线性重复，但是问题就来了，如果我们内容固定尚可，但是若内容动态变化，就会出现速度不稳定的情况，所以这里我们需要动态计算一下播放时间，通过内联样式写入DOM节点，这样就基本完美了，至少采用CSS3渲染动画，比JS效果要高那么一筹。

当然，这里还是有些小问题，比如重新赋值时抖动等，这些无论是早期marquee还是js都不能非常完美的解决，只能自己根据实际情况确定方案了，比如固定宽度JS计算位置等。

小记录方便以后使用。