循环后暂停css sprite一秒钟

Posted 2023-03-06

【中文标题】循环后暂停css sprite一秒钟

【英文标题】：Pause css sprite for a second after loop

【发布时间】：2016-05-01 14:31:42

【问题描述】：

有没有办法（使用css）在最后一步之后暂停精灵一或多秒？我试图再增加一个步骤或从 80% 到 100% 的相同 bg 位置，但它没有工作。

.sprite 
  animation: anim 2000ms steps(16) infinite;
  background: url(http://i.imgur.com/9FprJ5C.png) left center no-repeat;
  height: 45px;
  width: 90px;


@keyframes anim 
  0% 
    background-position: 0px 0;
  
  80% 
    background-position: -1440px 0px;
  
  100% 
    background-position: -1440px 0px;
  

<div class="sprite"></div>

【问题讨论】：

我认为它不是重复的。如您所见，正确的答案在这里行不通。这个动画也有步骤

我试图找到解决方案，但到目前为止它比当前工作的动画效果更好。 jsfiddle.net/aLnmh97e/4

谢谢你，ketan，我知道这一点，但我需要在这之后添加暂停，这就是为什么我添加了“消失”但仍然感谢你。

我认为让你暂停的唯一方法是为你的精灵添加额外的帧，我见过的大多数方法都说你需要去掉关键帧的最后一个百分比，但这似乎使精灵倒带。如果你添加额外的帧，它看起来像是在暂停：jsfiddle.net/rstkqoLL/2

是的，我认为 Pete 是对的，但我希望找到另一个解决方案。

【参考方案1】：

您是否尝试过使动画达到 50% 的结尾？即 1 秒后，从 50%-100% 暂停：

@keyframes anim 
  0% 
    background-position: 0px 0;
  
  50% 
    background-position: -1440px 0px;
  
  100% 
    background-position: -1440px 0px;
  

.sprite 
  animation: anim 2000ms steps(16) infinite;
  background: url(http://i.imgur.com/9FprJ5C.png) left center no-repeat;
  height: 45px;
  width: 90px;


@keyframes anim 
  0% 
    background-position: 0px 0;
  
  50% 
    background-position: -1440px 0px;
  
  100% 
    background-position: -1440px 0px;
  

<div class="sprite"></div>

【讨论】：

是的，基本上是一样的，当我从 80% 暂停时，鱼会在 50% 或 20% 时消失