文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS动画重复延迟

问CSS动画重复延迟
EN

Stack Overflow用户

提问于 2012-12-15 07:53:33

回答 10查看 133.1K关注 0票数 92

我最近发现了如何“正确”使用CSS动画(之前我认为它们不能像JavaScript那样制作复杂的序列)。所以现在我正在学习它们。

为了达到这个效果，我试着让一个渐变的“光晕”扫过一个类似进度条的元素。类似于本机Windows Vista/7进度条上的效果。

@keyframes barshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 1s 4s linear infinite;
}

正如你所看到的，我试图有4秒的延迟，然后在1秒内光芒扫过，重复。

然而，animation-delay似乎只适用于第一次迭代，在第一次迭代之后，光芒就会不断重复地扫过。

我按如下方式“解决”了这个问题：

@keyframes expbarshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 5s linear infinite;
}

from和80%是完全相同的，导致动画长度的80%的“延迟”。

这是可行的，但是对于我的下一个动画，我需要延迟是可变的(对于特定的元素是恒定的，但在使用动画的元素中是可变的)，而动画本身保持完全相同的长度。

使用上面的“解决方案”，当我想要更长的延迟时，我会得到一个更慢的动画。

有没有可能让animation-delay应用于所有迭代，而不仅仅是第一次迭代？

css

css-animations

Stack Overflow用户

发布于 2019-09-05 05:36:59

我知道这很古老，但我在这篇文章中寻找答案，使用jquery你可以很容易地做到这一点，而不会有太多的麻烦。只需在css中声明您的动画关键帧，并使用您想要的属性设置类。在我的案例中，我使用了css动画中的tada动画：

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

我希望动画每10秒运行一次，所以jquery只是添加了类，在6000ms (足够动画完成的时间)之后，它删除了类，4秒后，它再次添加类，因此动画再次开始。

$(document).ready(function() {
  setInterval(function() {

    $(".bottom h2").addClass("tada");//adds the class

    setTimeout(function() {//waits 6 seconds to remove the class
      $(".bottom h2").removeClass("tada");
    }, 6000);

  }, 10000)//repeats the process every 10 seconds
});

一点也不像一个人所说的那样困难。

票数 0

查看全部 10 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13887889

复制

相似问题

问CSS动画重复延迟
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS动画重复延迟EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS动画重复延迟
EN