CSS循环动画答案

【问题标题】：CSS loop an animationCSS循环动画
【发布时间】：2022-01-12 11:22:58
【问题描述】：

我正在尝试学习 HTML 和 CSS，但遇到了一个问题：

<style style="text/css">
    div.slide-slow {
        width: 100%;
        overflow: hidden;
    }

    div.slide-slow div.inner {
        animation: slide-slow 30s;
        margin-top: 0%;
    }

    @keyframes slide-slow {
        from {
            margin-left: 100%;
        }

        to {
            margin-left: 0%;
        }
    }
</style>

<div class="slide-slow">
    <div class="inner">
        <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
    </div>
</div>

我希望这个 CSS 循环播放，而不是在完成后停止。是否可以让 CSS 函数循环播放？

【问题讨论】：

有什么问题？
@Tushar 我希望它在完成后立即循环播放，滑入的图像“卡在”左角gyazo.com/b8a69abb539ed04c5a15df87f13e6e87

标签： css css-animations

【解决方案1】：

使用animation-iteration-count: infinite。用数值限制循环。

<style style="text/css">
  div.slide-slow {
    width: 100%;
    overflow: hidden;
  }
  div.slide-slow div.inner {
    animation: slide-slow 3s;
    margin-top: 0%;
    animation-iteration-count: infinite;
  }
  @keyframes slide-slow {
    from {
      margin-left: 100%;
    }
    to {
      margin-left: 0%;
    }
  }
</style>

<div class="slide-slow">
  <div class="inner">
    <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
  </div>
</div>

补充： Ismael 建议实现带有翻转效果的来回动画，可以使用rotateY(180deg)。与在静态位置/位置翻转相反，最好旋转鱼，就好像它随着水流向后移动（正常动画）。 ease-in-out 可以帮助更好地维护计时功能。我使用width: 40vw 来实现旋转功能，使其略微响应/视口相关，并且不会以太多偏移量旋转。

使用边距和宽度值来实现合适的动画。

<style style="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  div.slide-slow {
    width: 100%;
    overflow: hidden;
  }
  div.slide-slow div.inner {
    animation: slide-slow 15s;
    margin-top: 0%;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    width: 40vw;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
  }
  @keyframes slide-slow {
    0% {
      margin-left: 85%;
    }
    25% {
      margin-left: 20%;
      transform: rotateY(0deg);
    }
    50% {
      margin-left: -25%;
      transform: rotateY(180deg);
      transform-origin: center center;
    }
    75% {
      margin-left: 50%;
      transform: rotateY(180deg);
    }
    100% {
      margin-left: 85%;
      transform: rotateY(0deg);
    }
  }
</style>

<div class="slide-slow">
  <div class="inner">
    <img src="http://i.stack.imgur.com/nJAsS.gif" alt="Swimming fish">
  </div>
</div>

（图片来源：http://www.html.am/images/html-codes/marquees/fish-swimming.gif）

【讨论】：

【解决方案2】：

您可以将无限调用添加到普通的animation CSS 属性中。

为了使动画更流畅，我还建议多做一个步骤，让鱼离开屏幕，它只会完成动画，否则鱼就会消失。

div.slide-slow {
  width: 100%;
  overflow: hidden;
}
div.slide-slow div.inner {
  animation: slide-slow 3s infinite;
  margin-top: 0%;
}
@keyframes slide-slow {
  from {
    margin-left: 100%;
  }
  75% {
    margin-left: 0%;
  }
  100% {
    margin-left: -15%;
  }
}

<div class="slide-slow">
  <div class="inner">
    <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
  </div>
</div>

【讨论】：

【解决方案3】：

你可以添加这个属性：

 div.slide-slow div.inner {
      animation-iteration-count:infinite;
 }

【讨论】：

【解决方案4】：

我认为添加此代码会对您有所帮助.. 这也将添加动画方向..

CSS

div.slide-slow {
   width: 100%;
   overflow: hidden;
}

div.slide-slow div.inner {
   animation: slide-slow 3s;
   margin-top: 0%;
   animation-direction: alternate;
   animation-iteration-count: infinite;
}

【讨论】：