使用 javascript 在 webkit 蒙版位置动画之间等待 5 秒答案

【问题标题】：5 Second Wait between webkit mask position animation using javascript使用 javascript 在 webkit 蒙版位置动画之间等待 5 秒
【发布时间】：2021-10-07 00:26:00
【问题描述】：

到目前为止，我正在为图标制作 CSS 闪亮效果，我使用 webkit 掩码创建了效果，下面是我的 sn-p

 .hm-instagram:before{
 color: #0ED8F6;

  -webkit-mask-image: linear-gradient(-75deg, rgba(14,216,246,.6) 30%, #0ED8F6 50%, rgba(14,216,246,.6) 70%);
  -webkit-mask-size: 200%;
animation: shine 2.5s linear infinite;
}

@keyframes shine {
  from { -webkit-mask-position: 150%; }
  to { -webkit-mask-position: -50%; }
}

但现在我希望这个动画每 5 秒重复一次，就像每个动画循环之间有 5 秒的延迟。我不确定如何使用 javascript 实现这种效果。有什么想法吗？

【问题讨论】：

标签： javascript css webkit css-animations css-mask

【解决方案1】：

您可能只是在这里不需要 javascript。您只能通过 css 执行此操作。

您可以这样做。我们可以将其计算为动画持续时间 + 动画之间的延迟，而不是将一个动画持续时间计算为动画持续时间，即在这里我们可以将动画持续时间设置为 2.5(animation) + 5(delay) = 7.5 秒。

然后您可以相应地将动画更改为仅运行前 2.5 秒。在这里您可以设置 0% 到 33% 的动画（7.5 的 33% 是 2.5）。

CSS 示例

 .hm-instagram:before{
 color: #0ED8F6;

  -webkit-mask-image: linear-gradient(-75deg, rgba(14,216,246,.6) 30%, #0ED8F6 50%, rgba(14,216,246,.6) 70%);
  -webkit-mask-size: 200%;
animation: shine 7.5s linear infinite;
}

@keyframes shine {
  0% { -webkit-mask-position: 150%; }
  33% { -webkit-mask-position: -50%; }
  100% { -webkit-mask-position: -50%; }
}

JavaScript 版本

您可以使用setInterval 函数每 5 秒切换一次元素的类列表并相应地设置您的 css。

【讨论】：