文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS动画重复延迟

问CSS动画重复延迟
EN

Stack Overflow用户
提问于 2012-12-15 07:53:33
回答 10查看 133.1K关注 0票数 92

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

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

代码语言：javascript
复制
@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似乎只适用于第一次迭代，在第一次迭代之后，光芒就会不断重复地扫过。

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

代码语言：javascript
复制
@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
EN

回答 10

Stack Overflow用户

发布于 2013-07-03 19:54:01

我也有类似的问题，于是我用

代码语言：javascript
复制
@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}

有些恼人的是，你必须伪造你的持续时间来解释两端的“延迟”。

票数 64
EN

Stack Overflow用户

发布于 2014-01-15 15:09:46

这就是你应该做的。它的工作原理是，你有一个1秒的动画，然后在迭代之间有4秒的延迟：

代码语言：javascript
复制
@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.超级简单和2.只需要一点逻辑。看看我做的这个舞蹈动画：

代码语言：javascript
复制
.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.延长动画的持续时间和每个动画的时间比例时，我实际上是想找出如何在动画中加入延迟的方法。在此之前，我让它们每个都持续.5秒，总持续时间为2.5秒。现在假设我想增加一个等于总持续时间的延迟，所以是2.5秒的延迟。

动画时间为2.5秒，延迟为2.5秒，因此将持续时间更改为5秒。但是，由于您将总持续时间增加了一倍，因此您需要将动画比例减半。检查下面的期末考试。这对我来说非常有效。

代码语言：javascript
复制
@-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);
  }
}

总结一下：

这些是你可能用来计算如何改变你的动画的持续时间和每个部分的百分比的计算。

desired_duration =x

desired_duration = animation_part_duration1 + animation_part_duration2 + ...(以此类推)

desired_delay =y

总持续时间=x+y

animation_part_duration1_actual = animation_part_duration1 * desired_duration / total_duration

票数 11
EN

Stack Overflow用户

发布于 2020-05-03 03:36:39

另一种在动画之间实现暂停的方法是应用第二个动画，该动画在您想要的延迟量内隐藏元素。这样做的好处是，您可以像往常一样使用CSS轻松功能。

代码语言：javascript
复制
.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

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

https://stackoverflow.com/questions/13887889

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档