Question

我正在将this CDN中的Animate.css服务到我的WordPress网站，并希望创建一些CSS类替代，以允许我在动画重复之前延迟发生的时间。目前，动画设置为“无限”重复。

Here's a live example非常快地展示了动画图像如何不断重复。

例如，如果我希望动画发生后有4s的延迟，我希望能够应用class =“ delay4”。然后在那4s之后动画将重复。

我可以轻松地在主题中添加CSS替代，因此这是最好的选择，因为我使用的是CDN。

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

Answer 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); }
}

<img src="https://jewelbound.com/wp-content/uploads/2018/11/icons8-downloading-updates-100.png"/>

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>

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

1 个答案: