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

Improve Performance with a Pause on an Infinite Gradient Animation

提问人：hashwagon 提问时间：9/21/2023 更新时间：9/21/2023 访问量：25

问：

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

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

.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来实现这一点？任何帮助将不胜感激！

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

CSS 背景 过渡 渐变 暂停

评论

答：

0赞 AztecCodes 9/21/2023 #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%}
}

评论

0赞 hashwagon 9/21/2023
完善。使用这种逻辑，我能够实现我想要的。
0赞 AztecCodes 9/21/2023
@hashwagon很高兴听到！
0赞 A Haworth 9/21/2023 #2

动画可以从动画持续时间的 0% 到 50%，然后在 50% 到 100% 的持续时间内保持在同一位置。

因此，此代码段将持续时间设置为 60 秒。在我的笔记本电脑上，GPU 的使用率不到 50%，持续 30 秒，然后 0% 持续 30 秒，依此类推。

用户确实可以在一半的时间内看到相同的静态颜色。我认为这就是“暂停”所需要的。

<style>
  .css-selector {
    background: linear-gradient(270deg, #3adab1, #3a7bda, #853ada);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 60s ease infinite;
    -moz-animation: AnimationName 60s ease infinite;
    animation: AnimationName 60s ease infinite;
    width: 100vw;
    height: 100vh;
  }
  
  @-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%
    }
    25% {
      background-position: 100% 50%
    }
    50%,
    100% {
      background-position: 0% 50%
    }
  }
</style>
<div class="css-selector"></div>

评论

0赞 hashwagon 9/21/2023
我很感激！另外，感谢您使用 GPU 对其进行验证。

上一个：如何在按下某个键之前运行定期操作

下一个：Kafka 消费者睡眠唤醒