css动画闪烁问题答案

【问题标题】：css animation flicker issuecss动画闪烁问题
【发布时间】：2017-09-15 10:58:43
【问题描述】：

Css marquee 效果有时会闪烁。动画不像我们预期的那样流畅。它有时会卡住。我尝试了 diff stackoverflow 帖子上提供的解决方案，但这对我没有多大帮助。

.marquee {
    width: 100%;
    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%;
    -webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    from   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

【问题讨论】：

点击codepen时会启动无限页面重新加载循环吗？ codepen 上的一些错误？
@RichardMauritz 我不这么认为。我的工作正常
无法重现闪烁。你能提供更多信息吗？究竟什么是闪烁？闪烁是指文字模糊吗？ - 编辑：重新加载页面并看到它一次：你的意思是这样的：不移动 1 帧，但在下一帧中移动两倍？ - 重新加载页面 10 次，我无法再复制它了
这听起来与您有关吗？ stackoverflow.com/questions/29320724/…
@nbar: 这可能取决于pc硬件配置，因为它很容易在window机中重现，但mac机与window相比性能有所提高，但仍然闪烁。在tizen tv你每次都能看到

标签： html css css-animations tizen-web-app

【解决方案1】：

animation: marquee 15s linear infinite; // you can change the time like 15s to 50s

【讨论】：

这有什么帮助？
这如何停止flikering？

【解决方案2】：

试着写

from   { transform: translate(0, 0); }
to { transform: translate(-100%, 0); } /* Instead of 100% */

你也可以尝试使用所有前缀，-moz- 和 -webkit-

【讨论】：