Html 我如何让这个动画播放，然后停止，然后在设定的时间后再次播放 (CSS)

发布于02月17日

我正在为我朋友的网站制作一个文本动画，我试图制作一个闪烁的效果，但是它起作用了，但是它播放了一次，我想要它播放，然后停止，然后重新开始.我试过的这个牌子只是把它搞砸了.有谁知道解决办法吗？

(我的动画代码)

.neon span {
  animation: flicker 900ms linear 2;
  }
.neon .delay1 {
  animation-delay: 1.4s;
  }
.neon .delay2 {
  animation-delay: 2.0s;
  }
@keyframes flicker
  {
    0% { opacity: 0; }
   10% { opacity: 1; }
   20% { opacity: 0; }
   40% { opacity: 1; }
   50% { opacity: 0; }
   60% { opacity: 1; }
   80% { opacity: 0; }
  100% { opacity: 1; }
  }

在animation: flicker 900ms linear 2;行代码中，我试着放入infinte，但当我这样做时，它会以超快的速度闪烁，没有中断.我希望它闪烁得有点慢，然后停止，然后再次闪烁.

推荐答案

animation-delay仅指定动画first starts之前的延迟时间.

例如，你可以在你的animation速记中指定哪一个作为infinite，而不包括在两次迭代之间.

因此，你必须通过手动将其构建到@keyframes中来"伪造"它.

.neon span {
  animation: flicker 900ms linear 1.4s infinite;
 }

@keyframes flicker {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: 0; }
  40% { opacity: 1; }
  50% { opacity: 0; }
  60% { opacity: 1; } /* 'fake' delay */
  80% { opacity: 1; } /* 'fake' delay */
  100% { opacity: 1; } /* 'fake' delay */
}

在上面的示例中，它将在初始页面加载时等待1.4秒，然后在900ms个持续时间的60%时间内开始在opacity: 0到opacity: 1之间闪烁，然后在其他40%的时间内保持opacity: 1.

它闪烁的速度取决于你的animation-duration秒(例如900毫秒)除以你@keyframes秒的 Select 器(步数)的数量. 因此，如果您增加/减少持续时间，或减少/增加关键帧 Select 器的数量(例如0%、1%、2%、3%...animation-duration%)，它将闪烁得更慢/更快.

然后，它将立即重新启动，并无限重复.

此处讨论:

CSS animation delay in repeating个

CSS animation delay between iterations个

Html 我如何让这个动画播放，然后停止，然后在设定的时间后再次播放 (CSS)

推荐答案

Html相关问答推荐

一次悬停可触发同一分区中的另一次悬停

在Apps Script中连接CSS与HTML

CSS自定义特性中的URL是否可以相对于定义的CSS文件？

HTML+CSS+JS动态选中文本高亮 colored颜色变化

在网页上的 Select 器中显示选项时出现问题：未在GO模板中传递循环{{range}}的数据

在WooCommerce单一产品页面上使产品图片库粘滞(固定)

穿过整个屏幕的旋转线

单独处理Button：Focus的多行按钮

当文本添加到元素中时，将元素拉到页面上

如何制作'；在第'；页中搜索；是否发现多个元素中的单词？

元素offsetTop在滚动容器中时没有更改

是否可以制作响应式 CSS 剪辑路径？

四开将一个 qmd 文档中的单词链接到另一个 qmd 文档中的单词

在Firefox中使用keySplines时，SVG： <animateMotion>不起作用

调整窗口大小时文本重叠导航栏

如何截断一些文本并用双引号引起来？

导航丸被选中(活动)，但内容未显示.怎么会？

font awesome 的 CDN/CSS 如何工作？

具有淡入/淡出效果的 CSS 选框

是否可以在换行时向锚标记添加填充？