CSS loop an animation

Question

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?

@Tushar I want it to loop right now when it is done the image that slides in gets "stuck" in the left corner gyazo.com/b8a69abb539ed04c5a15df87f13e6e87 — Raven
– Raven, Commented Sep 11, 2015 at 9:55

m4n0 · Accepted Answer · 2017-09-21 20:50:19Z

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.sstatic.net/nJAsS.gif" alt="Swimming fish">
  </div>
</div>

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

Stewartside · Accepted Answer · 2015-09-11 10:07:06Z

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>

answered Sep 11, 2015 at 10:07

Stewartside

21k13 gold badges64 silver badges82 bronze badges

Comments

m4n0 · Accepted Answer · 2015-09-11 10:21:18Z

8

You can add this property:

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

edited Sep 11, 2015 at 10:21

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

answered Sep 11, 2015 at 9:53

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Comments

m4n0 · Accepted Answer · 2015-09-11 10:10:37Z

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

edited Sep 11, 2015 at 10:10

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

answered Sep 11, 2015 at 10:02

Amit singh

2,0661 gold badge15 silver badges19 bronze badges

Collectives™ on Stack Overflow

CSS loop an animation

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related