使用javascript在webkit遮罩位置动画之间等待5秒

Question

我正在做一个CSS闪亮的图标效果，到目前为止，我已经创建了使用webkit掩模效果，下面是我的代码片段

 .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来实现此效果。有什么想法吗？

Answer 1

在这里你可能不需要javascript。您可以仅通过css来完成此操作。

下面是你如何做到这一点的。我们可以将动画持续时间计算为动画持续时间+动画之间的延迟，而不是将一个动画持续时间计算为动画持续时间+动画之间的延迟，即这里我们可以将动画持续时间设置为2.5(动画)+5(延迟)= 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。