CSS цикл анимации

Я пытаюсь изучить 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 в цикле?

Ответы

Ответ 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>

Ответ 2

Вы можете добавить это свойство:

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

Ответ 3

Вы можете добавить бесконечный вызов в обычное свойство CSS animation.

Чтобы сделать анимацию более гладкой, я также рекомендую иметь дополнительный шаг, который заставляет рыбу покидать экран, она просто завершает анимацию, иначе рыба просто исчезает.

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>

Ответ 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;
}