How to Loop a CSS Animation with Multiple Keyframe Definitions

How do I loop a css animation with multiple keyframe definitions?

Without javascript I don't think you can. However you can achieve the same effect using a single keyframe animation.

.fade-bg {
  animation-name: fade-bg;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;
}

@keyframes fade-bg {
    0% {
        opacity: 0;
        background-image: url('image-1.jpg');
    }

    25% {
        opacity: 1;
        background-image: url('image-1.jpg');
    }

    50% {
        opacity: 0;
        background-image: url('image-1.jpg');
    }

    51% {
        opacity: 0;
        background-image: url('image-2.jpg');
    }

    75% {
        opacity: 1;
        background-image: url('image-2.jpg');
    }

    100% {
        opacity: 0;
        background-image: url('image-2.jpg');
    }
}

EXAMPLE

Css keyframe loop, finish iteration of animation on element with multiple animations

So I found out why it didn't work. There is some additional information in how I've managed to get it to work after all, that I'll explain here.

It was my fault because there is another animation attached sub element:

<div id="a1"> <-- Main animation that should finish the loop
  <div id="a2"></div> <-- sub animation that should not be finished
</div>

That was the reason why the animation call backs where triggered more often than expected. But: I found out that I can filter by animation name!

$("#a1").on('animationiteration webkitAnimationIteration', function(e) {
/* this triggers not only when animation of #a1 iterated but also if animation of #a2 iterated */
 let animation_name = e.originalEvent.animationName;
if(animation_name == "animation1name"){
 //This will only trigger if the correct animation iterated
}
});

I hope this solution can help someone who tries to handle multiple looping animations applied to one element (or sub element)

Thanks to everyone else who helped! ( I adjusted the question title in order to highlight what the problem actually was )

How to loop through a CSS Animation?

If you want to make the Transition smooth, then obviously you should make the ending equal to the beginning.

Then, there is no difference between the beginning and ending.

I made my own version of your CSS code to show you how I would have done it. You should modify it to make your own version.

@keyframes color-function
{
    0%
    {
        background-color: red;
        height:100px;
        border-radius: 50%;
    }
    20%
    {
        background-color: yellow;
        height:100px;
        border-radius: 50%;
    }
    40%
    {
        background-color: blue;
        height:100px;
        border-radius: 50%;
    }
    60%
    {
        background-color: green;
        height:100px;
        border-radius: 50%;
    }
    80%
    {
        background-color: red;
        height:150px;
        border-radius: 0%;
    }
    100%
    {
        background-color: red;
        height:100px;
        border-radius: 50%;
    }
}

How to create a keyframe smooth continuous loop that doesn't jump with a background image?

Live example to continuously move up :

#animate-area {
  background-image: url('https://pt.freelogodesign.org/Content/img/logo-ex-2.png');
  width: 100%;
  height: 500px;

  background-position: 0;
 animation: slideup 5s linear 1s infinite;
 
 position:absolute;
}

@keyframes slideup {
  0% { background-position: 0 0; }
  50% { background-position: 0 -500px; }
  100% { background-position: 0 -900px; }
}

<div id="animate-area"></div>

Repeat multiple css animations

How it works?

1: Animation duration / no. of elements = animation delay

2: You need to tweak keyframe animation as per your requirements(this may vary). You need have instinct on time appearance of your each element & time gap.

3: And add animation-iteration-count: infinite; to your individual element.

body {  font-size: 62.5%;  font-family: Arial;}
.animation-box {  width: 75%;  height: 30rem;  background-color: darkblue;  margin: 0 auto;  overflow: hidden;  position: relative;}
@keyframes fadeInOut { 0% {opacity: 0;}
2% {opacity: 0;}
5% {opacity: 1;}
17% {opacity: 1;}
19% {opacity: 1;}
24% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 0;}}
.animation-box h1 {  position: absolute;  left: 5%;  top: 0;  font-size: 4em;  color: white;  font-weight: 400;}
.first-line,.second-line,.third-line,.fourth-line {  font-size: 3em;  position: absolute;  left: 5%;  top: 20%;  opacity: 0;  color: rgba(200,200,200,0.9);  animation-name: fadeInOut;  animation-iteration-count: infinite;}
.first-line {    animation-duration: 12s;}
.second-line {    animation-delay: 3s;  animation-duration: 12s;}
.third-line {  animation-delay: 6s;  animation-duration: 12s; }
.fourth-line {    animation-delay: 9s;  animation-duration: 12s;}

<section class="animation-box">    <h1>Fading the lines</h1>       <div class="first-line">This is line 1</div>    <div class="second-line">here comes line 2</div>    <div class="third-line">3 is the perfect number</div>    <div class="fourth-line">the final one is 4</div>  </section>

---

Related Topics