CSS循环动画

Question

我正在尝试学习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函数循环？

Answer 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)

Answer 2

您可以将无限调用添加到普通的animationCSS属性中.

为了使动画更流畅,我还建议有一个额外的步骤让鱼离开屏幕,它只是完成动画,否则鱼就会消失.

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>

Answer 3

您可以添加此属性:

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