为什么 <marquee> 被弃用，什么是最好的选择？

Question

更长的时间我对 HTML 标签 <marquee> 感到好奇。

您可以在 MDN 规范 中找到：

过时 此功能已过时。尽管它在某些浏览器中可能仍然有效，但不鼓励使用它，因为它可能随时被删除。尽量避免使用它。

或者在 W3C wiki 上：

不完全是。不要使用它。

我搜索了几篇文章，发现了一些关于 CSS 相关替换的提及。 CSS 属性如：

 marquee-play-count
marquee-direction
marquee-speed

但似乎，它们不起作用。它们在 2008 年 是规范的一部分，但在 2014 年 被排除在外

W3 Consortium 提出的一种方法是使用 CSS3 动画，但对我来说，它似乎比易于维护 <marquee> 复杂得多。

还有很多 JS 替代品，有很多源代码，您可以将它们添加到您的项目中并使它们更大。

我总是读到这样的东西：“永远不要使用选取框”，“已经过时了”。我不明白为什么。

那么，任何人都可以向我解释， 为什么 不推荐使用 marquee，为什么使用它如此“危险”以及 最简单的替代方法是什么？

我找到了一个 例子，它看起来不错。当您使用良好浏览器支持所需的所有前缀时，您有大约 20-25 行 CSS，其中 2 个值是硬编码的（开始和停止缩进），具体取决于文本长度。这个解决方案不太灵活，你不能用它来创建自下而上的效果。

原文由 areim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您不应该移动内容，但这并不能回答您的问题…看看 CSS：

 .marquee {
    width: 450px;
    line-height: 50px;
    background-color: red;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

这是 代码笔。

编辑：

这是从下到上的 代码笔。

原文由 Thomas Bormans 发布，翻译遵循 CC BY-SA 3.0 许可协议