CSS循环一个动画

@H_301_1@我试图学习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函数循环？

解决方法

使用 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可以帮助保持定时功能更好。我已经使用宽度：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)

CSS循环一个动画

解决方法

猜你在找的CSS相关文章