只需稍加更改标记，这就是我的方法（我刚刚
span在段落中插入了一个内部）：
.marquee { width: 450px; margin: 0 auto; white-space: nowrap; overflow: hidden; box-sizing: border-box;}.marquee span { display: inline-block; padding-left: 100%; will-change: transform; animation: marquee 15s linear infinite;}.marquee span:hover { animation-play-state: paused}@keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); }}@media (prefers-reduced-motion: reduce) { .marquee { white-space: normal } .marquee span { animation: none; padding-left: 0; }}<p > <span> Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the Start screen, charms and a Microsoft account, you can spend less time searching and more time doing. </span> </p>没有插入硬编码的值（取决于段落宽度）。
该动画应用了CSS3
transform属性（在需要时使用前缀），因此效果良好。
如果您只需要在开始时插入一次延迟，则还可以设置一个
animation-delay。如果您需要在 每个
循环中插入一个小的延迟，则尝试使用较高的延迟
padding-left（例如
150%）
