CSS动画重复延迟


79

最近,我发现了如何“正确地”使用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应用于所有迭代,而不仅是第一次迭代?


很不幸的是,不行。animation-delay是动画开始之前的延迟,并且没有其他类似的属性。您可能不希望使用JavaScript的一个不好的解决方法:)
Ry-

Answers:


55

我有一个类似的问题,并使用

@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}

有点恼人的是,您必须伪造持续时间以解决两端的“延迟”。


18

minitech是正确的,它animation-delay指定了动画开始之前的延迟,而不是指定两次迭代之间的延迟。 规范的编辑者草稿对此进行了很好的描述,并且您在此处讨论了此功能这暗示了此迭代延迟功能。

尽管JS中可能有解决方法,但是您可以仅使用CSS来伪造此迭代延迟,以消除进度条耀斑。

通过声明flare divposition:absolute和父div overflow: hidden,将100%关键帧状态设置为大于进度条的宽度,并使用三次贝塞尔曲线计时功能和左偏移值,您可以模拟ease-in-outlinear计时延迟”。

编写一个less / scss mixin来计算确切的左偏移量和计时函数以获得这个精确度是很有趣的,但是我现在没有时间摆弄它。很想看到类似的东西!

这是我一起展示的演示。(我试图模仿Windows 7进度栏,但略有不足,但这证明了我在说什么)

演示:http//codepen.io/timothyasp/full/HlzGu

<!-- HTML -->
<div class="bar">
   <div class="progress">
      <div class="flare"></div>
   </div>
</div>


/* CSS */

@keyframes progress {
  from {
    width: 0px;
  }
  to {
    width: 600px;
  }
}

@keyframes barshine {
  0% {
    left: -100px;
  }

  100% {
    left: 1000px;
  }
}
.flare {
  animation-name: barshine;
  animation-duration: 3s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.14, .75, .2, 1.01);
  animation-iteration-count: infinite;
  left: 0;
  top: 0;
  height: 40px;
  width: 100px;
  position: absolute;
  background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%, rgba(255,255,255,0) 87%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)), color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */
  background: radial-gradient(ellipse at center,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  z-index: 10;
}
.progress {
  animation-name: progress;
  animation-duration: 10s;
  animation-delay: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  overflow: hidden;
  position:relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  border-right: 1px solid #0f9116;
  background: #caf7ce; /* Old browsers */
  background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#caf7ce), color-stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* IE10+ */
  background: linear-gradient(to bottom, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#caf7ce', endColorstr='#2ab22a',GradientType=0 ); /* IE6-9 */
}

.progress:after {
  content: "";
  width: 100%;
  height: 29px;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 3;
  background: -moz-linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* IE10+ */
  background: linear-gradient(to right, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00caf7ce', endColorstr='#2ab22a',GradientType=1 ); /* IE6-9 */
}

.bar {
  margin-top: 30px;
  height: 40px;
  width: 600px;
  position: relative;
  border: 1px solid #777;
  border-radius: 3px;
}

46
典型的CSS。它们提供CSS动画,所以它不是用Java脚本完成的,并且样式都集中在一个地方,但是如果您想做的事情只不过是基础知识,那么您就必须实现一些迷宫。他们为什么不实施使开发人员更轻松的事情?
乔纳森。

10

这是您应该做的。它的工作原理是您有一个1秒的动画,然后在两次迭代之间有4秒的延迟:

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

因此,我一直在搞砸这件事,您可以做到这一点而又不至于太笨拙。这是在动画迭代之间设置延迟的最简单方法,即1. SUPER EASY和2.只需一点逻辑。看看我制作的这个舞蹈动画:

.dance{
  animation-name: dance;
  -webkit-animation-name: dance;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;

  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;

}
@keyframes dance {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  50% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes dance {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  40% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  60% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  80% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  95% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
}

当我意识到您只需1.延长动画的持续时间并按每个动画的时间比例分配衬衫时,我实际上是来这里试图弄清楚动画的延迟的。Beore我让它们每个持续0.5秒,总持续时间为2.5秒。现在说我想添加一个等于总持续时间的延迟,因此是一个2.5秒的延迟。

动画时间为2.5秒,延迟为2.5,因此将持续时间更改为5秒。但是,由于您将总持续时间增加了一倍,因此您希望将动画比例减半。检查下面的决赛。这对我来说非常合适。

@-webkit-keyframes dance {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  20% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  30% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

总共:

这些是您可能会用来计算如何更改动画的持续时间和每个部分的百分比的方法。

required_duration = x

required_duration = animation_part_duration1 + animation_part_duration2 + ...(依此类推)

wanted_delay = y

总持续时间= x + y

animation_part_duration1_actual = animation_part_duration1 *所需持续时间/总计持续时间


发现有法国人:)(我也是法国人,请放心)
julesbou

5

我宁愿写一点JavaScript也不愿使CSS不太容易管理。

首先,仅将CSS动画应用于数据属性更改:

.progbar[data-animation="barshine"] {
    animation: barshine 1s linear;
}

然后添加javascript,以延迟量的一半切换动画。

var progbar = document.querySelector('.progbar');
var on = false;

setInterval(function () {
    progbar.setAttribute('data-animation', (on) ? 'barshine' : '');
    on = !on;
}, 3000);

或者,如果您不希望在隐藏选项卡时运行动画,请执行以下操作:

var progbar = document.querySelector('.progbar');
var on = false;

var update = function () {
    progbar.setAttribute('data-animation', (on) ? 'barshine' : '');
    on = !on;
    setTimer();
};

var setTimer = function () {
    setTimeout(function () {
        requestAnimationFrame(update);
    }, 3000);
};

setTimer();

2

我在墙上作了一个海报,它左右间隔地移动。对我来说,它有效:

.div-animation {
   -webkit-animation: bounce 2000ms ease-out;
    -moz-animation: bounce 2000ms ease-out;
    -o-animation: bounce 2000ms ease-out;
    animation: bounce 2000ms ease-out infinite;
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation-delay: 2s;
    transform-origin: 55% 10%;    
}

@-webkit-keyframes bounce {
    0% {
        transform: rotate(0deg);
    }
    3% {
        transform: rotate(1deg);
    }
    6% {
        transform: rotate(2deg);
    }
    9% {
        transform: rotate(3deg);
    }
    12% {
        transform: rotate(2deg);
    }
    15% {
        transform: rotate(1deg);
    }
    18% {
        transform: rotate(0deg);
    }
    21% {
        transform: rotate(-1deg);
    }
    24% {
        transform: rotate(-2deg);
    }
    27% {
        transform: rotate(-3deg);
    }
    30% {
        transform: rotate(-2deg);
    }
    33% {
        transform: rotate(-1deg);
    }
    36% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

1

这是一个小片段,可以在75%的时间内显示相同的内容,然后滑动。此重复模式很好地模拟了延迟:

@-webkit-keyframes slide    {
0%   {background-position: 0 0;}
25%  {background-position: 0 0;}
50%  {background-position: 0 0;}
75%  {background-position: 0 0;}
100% {background-position: 13em 0;}
}

@-moz-keyframes slide       {
0%   {background-position: 0 0;}
25%  {background-position: 0 0;}
50%  {background-position: 0 0;}
75%  {background-position: 0 0;}
100% {background-position: 13em 0;}
}

@keyframes slide            {
0%   {background-position: 0 0;}
25%  {background-position: 0 0;}
50%  {background-position: 0 0;}
75%  {background-position: 0 0;}
100% {background-position: 13em 0;}
}

1

可以在动画之间实现暂停的另一种方法是应用第二个动画,该动画将元素隐藏所需的延迟量。这样做的好处是可以像平常一样使用CSS缓动功能。

.star {
  animation: shooting-star 1000ms ease-in-out infinite,
    delay-animation 2000ms linear infinite;
}

@keyframes shooting-star {
  0% {
    transform: translate(0, 0) rotate(45deg);
  }

  100% {
    transform: translate(300px, 300px) rotate(45deg);
  }
}

@keyframes delay-animation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

仅当您希望延迟为动画持续时间的倍数时,此方法才有效。我用它使流星雨看起来更加随机:https//codepen.io/ericdjohnson/pen/GRpOgVO


0

延迟一开始只能无限无限。排序延迟不适用于无限循环。为此,您必须保留关键帧动画空白示例:

@-webkit-keyframes barshine {
  10% {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
    }
  60% {background: -webkit-linear-gradient(top, #7db9e8 0%,#d32a2d 100%);}
}

它将制作10%到60%的动画,并等待完成40%的动画。因此,有40%的延迟。

查找小提琴的例子


0

我知道这很老了,但我一直在寻找这篇文章的答案,有了jquery,您可以轻松地做到这一点,而不会带来太多麻烦。只需在CSS中声明动画关键帧,然后为类设置所需的属性即可。我的情况是使用css animate的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
});

一点也不困难,就像一个人发布的那样。


我不确定为什么要使用jQuery进行.classList.add("tada"):D
Niet the Dark Absol

我想起来更容易记住...而且您根本不需要使用jquery,如果您愿意的话,您可以编写3条javascript行,而不是jquery编写1条,这完全取决于编写代码的人:)
Marcos Silva Lepe19年

我不知道的人,$(".bottom h2").addClass("tada")并且document.querySelector(".bottom h2").classList.add("tada")是如此的相似,它是不值得加载/开销运行jQuery代码:P
Niet的黑暗ABSOL

我想你是对的。我在使用javascript的免费前端中看到了这个非常酷的滑块,并且由于我主要使用jquery,所以我尝试用它来复制滑块,虽然这样做,但它的耗费是使用javascript制作的原始滑块的5倍:(我猜该javascript比使用jquery代码轻得多,另一方面,它也不那么冗长
Marcos Silva Lepe

0

您完全可以使用CSS在无限动画之间创建“伪”延迟。方法是巧妙地定义关键帧动画点和动画持续时间。

例如,如果我们想为一个弹跳球设置动画,并且希望每次弹跳之间有0.5s到1s的良好延迟,我们可以执行以下操作:

@keyframes bounce{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(25%);
    }
    75%{
        transform: translateY(15%);
    }
    90%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(0);
    }
}

我们要做的是确保球早于100%返回其原始位置。在我的示例中,我正在执行90%的操作,这给了我约0.1秒的延迟,这对我来说已经足够了。但显然对于您的情况,您可以添加更多关键帧点并更改变换值。

此外,您可以添加其他动画持续时间以平衡关键帧动画。

例如:

 animation: bounce .5s ease-in-out infinite;

可以说,我们希望整个动画以0.5s结尾,但是我们希望动画之间的延迟增加0.2s。

 animation: bounce .7s ease-in-out infinite;

因此,我们将添加一个额外的.2s延迟,并且在关键帧动画中,我们可以添加更多的百分比来填充.2s延迟的间隔。


我通常最终会这样做。不利的一面是,调整动画真的很困难,因为定时的每次更改都要求更改所有值。除非您使用许多sass变量正确设置它,否则通常会花费很多精力。
Beppe

0

对于边框闪光:实际上非常简单:将替换为到99%的黑色,例如将1%转换为蓝色,您甚至可以使其变短,动画时间设置为例如5秒。

@keyframes myborder {
  0% {border-color: black;}
  99% {border-color:black;}
  100% {border-color: blue;}
 }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.