如何通过 CSS 覆盖在重复无限动画之间添加延迟答案

【问题标题】：How to add delay between repeating infinite animation via CSS override如何通过 CSS 覆盖在重复无限动画之间添加延迟
【发布时间】：2019-05-01 20:49:00
【问题描述】：

我正在将来自this CDN 的 Animate.css 提供给我的 WordPress 网站，并希望创建一些 CSS 类覆盖，这将允许我在动画重复之前延迟发生的时间量。目前，动画设置为“无限”重复。

Here's a live example 动画图像如何快速地不断重复。

我希望能够应用 class="delay4" 例如，如果我希望在动画发生后有 4 秒的延迟。然后在这 4 秒之后，动画会重复。

我可以轻松地将 CSS 覆盖添加到我的主题中，因此这是最好的选择，因为我使用的是 CDN。

奖金！！如果我还可以指定动画的持续时间，那将是理想的。也就是说，有些动画发生得太快了，我认为如果它们放慢一点，它们可能看起来会更好。

【问题讨论】：

标签： css wordpress animation css-animations cdn

【解决方案1】：

我有两个解决方案，一个是纯基于自定义 css，另一个是基于 animate.css + jquery。

Css 解决方案：

img {
  animation: shake 5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  2% { transform: translate(-1px, -2px) rotate(-1deg); }
  4% { transform: translate(-3px, 0px) rotate(1deg); }
  6% { transform: translate(3px, 2px) rotate(0deg); }
  8% { transform: translate(1px, -1px) rotate(1deg); }
  10% { transform: translate(-1px, 2px) rotate(-1deg); }
  12% { transform: translate(-3px, 1px) rotate(0deg); }
  14% { transform: translate(3px, 1px) rotate(-1deg); }
  16% { transform: translate(-1px, -1px) rotate(1deg); }
  18% { transform: translate(1px, 2px) rotate(0deg); }
  20% { transform: translate(1px, -2px) rotate(-1deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

&lt;img src="https://jewelbound.com/wp-content/uploads/2018/11/icons8-downloading-updates-100.png"/&gt;

jQuery 解决方案：

var $post = $(".img1");
setInterval(function(){
    $post.toggleClass("animated");
}, 4000);

div{ text-align:center; with:100%}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"/>
<div class=" shake  infinite animated img1"><img src="https://jewelbound.com/wp-content/uploads/2018/11/icons8-downloading-updates-100.png"/></div>

【讨论】：