动画迭代计数无限循环

Posted 2023-03-06

【中文标题】动画迭代计数无限循环

【英文标题】：animation-iteration-count looping infinitely

【发布时间】：2021-07-10 18:24:23

【问题描述】：

[编辑：在下面添加 Js]

我有 4 张图像的循环，我希望图像在其持续时间内淡入和淡出，然后在最后一张图像上停止。当我将“animation-iteration-count”更改为 1 时，第一次迭代后还有另一个循环。第二个循环似乎更加不稳定，我认为这是因为剩余的动画持续时间。

我知道到目前为止，最后一张图片仍然会在我需要它在最后一张图片上暂停的地方淡出，这是在我获得平滑的单张图片循环后要解决的下一个问题。

根据我的阅读，animation-iteration-count 的默认值为 1，但我不确定为什么图像会继续循环。

下面是我的代码：

CSS：

@keyframes cf4FadeInOut 
  0% 
    opacity:1;
  
  17% 
    opacity:1;
  
  25% 
    opacity:0;
  
  92% 
    opacity:0;
  
  100% 
    opacity:1;
  
 

#cf 
  height: 100vh;
  width: 100vw;


#cf img 
    position:absolute;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;

    left: 0;
    right: 0;
    bottom: 0;
    top: 0;

    max-height: 85vh;
    max-width: 75vw;

    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);

    animation-name: cf4FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 30s;
    opacity: 0;



#cf img:nth-of-type(1) 
  animation-delay: 15s;

#cf img:nth-of-type(2) 
  animation-delay: 10s;

#cf img:nth-of-type(3) 
  animation-delay: 5s;
 
#cf img:nth-of-type(4) 
  animation-delay: 0s;
 

javascript：

function App()   
  return (
    <div id="container" style=overflow:'hidden'>
        <div id="cf">
            <img src=image1/>
            <img src=image2/>
            <img src=image3/>
            <img src=image4/>
          </div>
        </div>
    </div>
  );

如果我降低动画持续时间，我不会在图像之间获得平滑的过渡，并且它似乎从一个图像跳到另一个图像。我想我一定是在图像之间的时间上遗漏了一些东西，有什么我应该知道的公式吗？

【参考方案1】：

animation-fill-mode: forwards

将在最后一个关键帧上停止动画状态。

【讨论】：

我替换了animation-iteration-count: 1;使用动画填充模式：转发；它仍然会再次循环播放图像

对不起，我想我一开始误解了你的问题，但我现在明白了什么问题了。您的 @keyframes 使图像 100% 完全不透明，这就是它们回来的原因。将您的 css 更改为 0%,17%opacity: 1; 25%,100% opacity: 0，或者如果您不关心它的简写，只需在 100% 关键帧上将不透明度值更改为 0。