Add and Remove Keyframe on time-CodePudding

I have 3 moving objects with my keyframe:

  @keyframes rotation {
        0% {
            transform: rotateY(0deg)
        }
        10% {
            transform: rotateY(55deg)
        }
        30% {
            transform: rotateY(55deg)
        }
        60% {
            transform: rotateY(230deg)
        }
        80% {
            transform: rotateY(230deg)
        }
        100% {
            transform: rotateY(360deg)
        }
    }

this moves my object ->

css:

.object{
    position: relative;
    margin: auto;
    height: 300px;
    width: 300px;
    -webkit-transition: -webkit-transform 2s linear;
    -webkit-transform-style: preserve-3d;
    -moz-transition: -moz-transform 2s linear;
    -moz-transform-style: preserve-3d;
    transition: transform 2s linear;
    transform-style: preserve-3d;
    transform: rotateY(230deg);
}


.cb2 {
    animation: rotation 20s infinite linear;
}

Now I want the first object to spin once then when it's done the second one should spin, when the second one is done the third one should spin.

I tried something like this:

setTimeout(function() {
    $("#first").addClass('cb2');
}, 10000);
setTimeout(function() {
    $("#first").removeClass('cb2');
}, 16500);
setTimeout(function() {
    $("#second").addClass('cb2');
}, 16600);
setTimeout(function() {
    $("#second").removeClass('cb2');
}, 29900);
setTimeout(function() {
    $("#third").addClass('cb2');
}, 30100);

First of all, that doesn't really work, because it's not really smooth but the main problem is, that this will do the job once, but I want to loop this. Is that possible ?

HTML:

  <div id="container">
        <div id="thrdcb"  style="top:100px;left: 10%;bottom:0;pointer-events: none;">
            <div >
                <div >
                    <div >
                        <div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" >
                            <div ></div>
                            <div >
                                <div >
                                    <div id="firstcube" >
                                        <div >
                                            <p id="firstnewssub" style="position: relative; background-color: #a3ba1e; padding: 10px;">

                                            </p>
                                        </div>
                                        <div >
                                            <p id="firstnewssub2" style="position: relative; background-color: #a3ba1e; padding: 10px;">

                                            </p>
                                        </div>
                                        <div >
                                            <img src="data/img/testasdd.png" alt="" />
                                            <p id="aaaae" style="position: relative; background-color: #a3ba1e; padding: 10px;">
                                            </p>
                                        </div>
                                        <div >
                                            <img src="data/img/asddfff.png" alt="" />
                                            <p id="firstnews2" style="position: relative; background-color: #a3ba1e; padding: 10px;">
                                            </p>

                                        </div>
                                    </div>
                                    <a id="rrzuii" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="7" data-chapter="1"
                                        data-names="opacity, pointer-events" data-start-values="0, none" data-end-values="1, all" data-delay="1000" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" >

                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="scndcb"  style="top:100px;right: 10%;bottom:0;pointer-events: none;">
            <div >
                <div >
                    <div >
                        <div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" >
                            <div >
                                <div >
                                    <div id="thirdcube" >
                                        <div >
                                            <p id="lppzz" style="position: relative; background-color: #62798b; padding: 10px;">

                                            </p>
                                        </div>
                                        <div >
                                            <p id="iottt" style="position: relative; background-color: #62798b; padding: 10px;">

                                            </p>
                                        </div>
                                        <div >
                                            <img src="data/img/asdaqqqqq.png" alt="" />
                                            <p id="thirdnews1" style="position: relative; background-color: #62798b; padding: 10px;">
                                            </p>
                                        </div>
                                        <div >
                                            <img src="data/img/uthhase.png" alt="" />
                                            <p id="thirdnews2" style="position: relative; background-color: #62798b; padding: 10px;">
                                            </p>

                                        </div>
                                    </div>
                                    <a id="aaklptt" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="7" data-chapter="1" data-names="opacity, pointer-events"
                                        data-start-values="0, none" data-end-values="1, all" data-delay="1000" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" >

                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="cubepointer"  style="top: 100px; left: 20%; right: 20%; bottom: 0px;pointer-events: none;">
            <div >
                <div >
                    <div >
                        <div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" >
                            <div >
                                <div >
                                    <div id="secondcube" >
                                        <div >
                                            <p id="dghh" style="position: relative; background-color: #e07a0c; padding: 10px;">

                                            </p>
                                        </div>
                                        <div >
                                            <p id="aas" style="position: relative; background-color: #e07a0c; padding: 10px;">

                                            </p>
                                        </div>
                                        <div >
                                            <img src="data/img/adasd.png" alt="" />
                                            <p id="ffss" style="position: relative; background-color: #e07a0c; padding: 10px;">

                                            </p>
                                        </div>
                                        <div >
                                            <img src="data/img/testm.png" alt="" />
                                            <p id="zz" style="position: relative; background-color: #e07a0c; padding: 10px;">

                                            </p>

                                        </div>
                                    </div>
                                    <a id="rdda" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="99" data-chapter="1" data-names="opacity, pointer-events" data-start-values="0, none" data-end-values="1, all"
                                        data-delay="9999" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" >

                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CodePudding user response：

You can make use of the animation event. In your case the animation is defined as animation: rotation 20s infinite linear;, so to stop the animation and start the next you need to look for the animationiteration event.

I wrapped the elements in a <div> for the event listener. At the same time this wrapper can be used for finding the next element to animate.

const container = document.getElementById('container');

//container.addEventListener('animationend', e => {
container.addEventListener('animationiteration', e => {
  $(e.target).removeClass('cb2');
  let next = e.target.parentElement.querySelector(`div#${e.target.id}~div.object`);
  if(next){
    $(next).addClass('cb2');
  }else{
    $(e.target.parentElement.querySelector(`div.object`)).addClass('cb2');
  }
});

// initiate animation
$(container.querySelector(`div.object`)).addClass('cb2');

@keyframes rotation {
  0% {
    transform: rotateY(0deg)
  }
  10% {
    transform: rotateY(55deg)
  }
  30% {
    transform: rotateY(55deg)
  }
  60% {
    transform: rotateY(230deg)
  }
  80% {
    transform: rotateY(230deg)
  }
  100% {
    transform: rotateY(360deg)
  }
}

.object {
  position: relative;
  margin: auto;
  height: 100px;
  width: 100px;
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 2s linear;
  -moz-transform-style: preserve-3d;
  transition: transform 2s linear;
  transform-style: preserve-3d;
  transform: rotateY(230deg);
}

.cb2 {
  animation: rotation 20s infinite linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="first" >A</div>
  <div id="second" >B</div>
  <div id="third" >C</div>
</div>

Update

The first example assumes that all the div.object elements are siblings. The following example is showing how div.object elements can be in a nested structure. In this case there is a need for a variable objects that hold all the div.objects. The selection of the next element happens based on the index of the current element in the array.

const container = document.getElementById('container');

const objects = container.querySelectorAll('.object');

container.addEventListener('animationiteration', e => {
  $(e.target).removeClass('cb2');
  let currentIndex = [...objects].indexOf(e.target);
  let next = objects[currentIndex 1];
  if(next){
    $(next).addClass('cb2');
  }else{
    $(objects[0]).addClass('cb2');
  }
});

// initiate animation
$(objects[0]).addClass('cb2');

@keyframes rotation {
  0% {
    transform: rotateY(0deg)
  }
  10% {
    transform: rotateY(55deg)
  }
  30% {
    transform: rotateY(55deg)
  }
  60% {
    transform: rotateY(230deg)
  }
  80% {
    transform: rotateY(230deg)
  }
  100% {
    transform: rotateY(360deg)
  }
}

.object {
  position: relative;
  margin: auto;
  height: 100px;
  width: 100px;
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 2s linear;
  -moz-transform-style: preserve-3d;
  transition: transform 2s linear;
  transform-style: preserve-3d;
  transform: rotateY(230deg);
}

.cb2 {
  animation: rotation 20s infinite linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div>
    <div id="first" >A</div>
  </div>
  <div>
    <div id="second" >B</div>
  </div>
  <div>
    <div id="third" >C</div>
  </div>
</div>

CodePudding user response：

While it is theoretically possible to do this in CSS, using one set of keyframes and the animation-delay CSS property, there is a possibility that timings could get out of step, as pointed out in a comment (depending for example how busy the system is with other things).

This snippet therefore sets the animation going for one cycle on the first object, listens for when that animation ends, removes the animation and puts it onto the next object and so on. That way it is guaranteed to keep in step sequentially, even if things get a little delayed sometime.

const objects = document.querySelectorAll('.objects > *');
const num = objects.length;
let n = 0;
objects.forEach(object => {
  object.addEventListener('animationend', function() {
    object.classList.remove('cb2');
    n = (n   1) % num;
    objects[n].classList.add('cb2');
  });
});
objects[n].classList.add('cb2');

@keyframes rotation {
  0% {
    transform: rotateY(0deg)
  }
  10% {
    transform: rotateY(55deg)
  }
  30% {
    transform: rotateY(55deg)
  }
  60% {
    transform: rotateY(230deg)
  }
  80% {
    transform: rotateY(230deg)
  }
  100% {
    transform: rotateY(360deg)
  }
}

.objects>* {
  position: relative;
  margin: auto;
  height: 300px;
  width: 300px;
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 2s linear;
  -moz-transform-style: preserve-3d;
  transition: transform 2s linear;
  transform-style: preserve-3d;
  transform: rotateY(230deg);
}

.objects>*:nth-child(1) {
  background: cyan;
}

.objects>*:nth-child(2) {
  background: magenta;
}

.objects>*:nth-child(3) {
  background: yellow;
}

.cb2 {
  animation: rotation 20s 1 linear;
}

<div >
  <div></div>
  <div></div>
  <div></div>
</div>