26

I'm trying to learn HTML and CSS but I have encountered a problem:

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

I want this CSS to loop and not just stop when it is done. Is it possible to make a CSS function to loop?

2

4 Answers 4

32

Use animation-iteration-count: infinite. Limit the loop with a number value.

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


Additional: For Ismael's suggestion to achieve back and forth animation with a flip effect, you can make use of rotateY(180deg). Contrary to flip at a static place/position, it is better to rotate the fish as if it is moving with the flow of water current to backwards(normal animation). ease-in-out can help maintaining the timing function better. I have used width: 40vw for the rotate function to slightly be responsive/view port dependent and not rotate with too much offset.

Play around with the margin and width values to achieve suitable animation.

<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="https://i.stack.imgur.com/nJAsS.gif" alt="Swimming fish">
  </div>
</div>

(image source: http://www.html.am/images/html-codes/marquees/fish-swimming.gif)

0
10

You can add the infinite call into the normal animation CSS property.

To make the animation smoother, I would also recommend having an extra step which makes the fish go off the screen, it just completes the animation otherwise the fish just disappears.

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>

8

You can add this property:

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

I think just adding this code will help you.. This will add the animation direction also..

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;
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.