通过暂停无限渐变动画来提高性能

Question

出于性能原因，我想在无限渐变动画中添加暂停，该动画是使用 https://www.gradient-animator.com/ 创建的，以便让网络浏览器在不同颜色之间渲染过渡时得到休息。

这是使用上述网站创建的示例脚本。

.css-selector {
    background: linear-gradient(270deg, #3adab1, #3a7bda, #853ada);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

有人建议通过修改此 CSS 来实现此目的吗？任何帮助将不胜感激！

这个site说它可以通过在“暂停”和“运行”状态之间循环来实现，尽管我不确定如何准确地实现它。我搜索了 Google 和 Stackoverflow，这促使我创建了这个。

Answer 1

延长关键帧持续时间并在动画保持不变的中间添加一个点可以解决此问题。

这个概念是修改关键帧，使动画在 0% 到 40% 之间发生，然后在 40% 到 60% 之间休息，最后动画在 60% 到 100% 之间完成。这种方法在动画中间引入了 20% 的持续时间暂停。

只需像这样调整你的 CSS 即可：

.css-selector {
    background: linear-gradient(270deg, #3adab1, #3a7bda, #853ada);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    40%{background-position:100% 50%}
    60%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    40%{background-position:100% 50%}
    60%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    40%{background-position:100% 50%}
    60%{background-position:100% 50%}
    100%{background-position:0% 50%}
}