本文介绍了如何通过CSS覆盖在重复无限动画之间增加延迟的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在将中的Animate.css提供给我的WordPress网站,想要创建一些CSS类替代,这将允许我在动画重复之前延迟发生的时间。当前,动画设置为无限重复。

I'm serving up Animate.css from this CDN to my WordPress site and would like to create some CSS class overrides that will allow me to delay the amount of time that occurs, before the animation repeats. Currently, the animations are set to "infinite" repeat.

,非常生动地演示了动画图像如何不断重复。

Here's a live example of how the animated image just keeps repeating, very quickly.

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

I'd like to be able to apply class="delay4" for example, if I wanted there to be a 4s delay after an animation occurs. Then after those 4s the animation would repeat.

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

I can easily add CSS overrides to my theme so this would be best option since I'm using a CDN.

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

BONUS!! It would be ideal if I could also specify a duration for the animation. i.e. Some of the animations happen so fast and I think if they were slowed down a bit, they might look better.

推荐答案

我对此有两个解决方案,一个是纯粹基于自定义css的,另一个是基于animate.css + jquery的。

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"/>
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覆盖在重复无限动画之间增加延迟的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 00:45
查看更多