每隔一段时间加速和减速

Question

我有一个css标题栏，我需要每隔一段时间改变速度。

例如:动画的当前速度设置为120秒。我需要的是像这样改变动画速度:最初3秒的动画速度:120秒，在3-8秒后加速到动画速度20秒，8秒后停止2秒到动画速度0，在循环中再次重复。在速度变化中，过渡应该是不可见的，它应该是平滑的。

我现在的演示

​

.marquee {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 120s linear infinite;
    background: red;
    color:white;
}
@keyframes marquee {
    0%   { text-indent: -150em }
    100% { text-indent: 0em }
}

<p class="marquee">creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits<span style="white-space: pre-wrap;"></span></p>

​

演示:这个视频上的绿色商标：https://youtu.be/U204bO8PXcE

提前感谢

Answer 1

最后，你的问题使我们的大脑冻结，当我洗澡时，我意识到这样做

.marquee {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 10s infinite;
    background: red;
    color:white;
}
    @keyframes marquee {
        0%   { text-indent: -100em }
        30%   { text-indent: -85em }
        75%   { text-indent: -50em }
        80% { text-indent: -50em }
        100% { text-indent: 0em}
    }

Answer 2

我已经用你的例子做了一些实验，结果是：https://codepen.io/spooky-rookie/pen/qBYYxVg

我已经做了一些计算，这就是为什么这些数值看起来有些出乎意料。更确切地说：

• 125 em/120 s= ~1.042 em/s，因此在3秒后文本应该在大约。因此，121.875em
• 121.875em /60(新动画持续时间)= ~2.031 em/s，因此，在JS中，我设置setTimeout在2.4秒后应用一个新动画(CSS定义的关键帧)持续5秒，而forwards在8秒后将停止它(两个动画而不是一个，因为在animation-duration仍然持续的时候对它进行干预确实是痛苦的，这是问题的评论中的文章)

；)

在这两种动画中，都有forwards for animation-fill-mode在最后一帧停止动画。

在:root选择器上，有一些变量可供使用，我建议您这样做，因为上面的那些变量也很讨厌。

JS中的setTimeout被设置为在2400ms (盲选择)之后触发，因为setTimeout是异步的，不会立即触发(请继续设置3000以查看转换中的跳转)。

总结一下，也许不是最好的解决方案，价值观需要严格的计算和设定，但它却以某种方式完成了任务。如果你有什么问题，继续问，也许我们会找到最中庸的；)

而且，这些动画时代仍然是相当大的，也许降低一点，将带来更多的预期结果。

编辑:注释中改进的解决方案：https://codepen.io/spooky-rookie/pen/JjvvLmX?editors=1100