How to know programmatically which is the last object that has the animation

Question

Is there a way for me to know programmatically on which object the CSS animation applies last

For example,

.r1 {
     animation-name: move1;
     animation-delay: 2.5s;
     animation-duration: 1s;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 .c1 {
     animation-name: blink;
     animation-delay: 0.5s;
     animation-duration: 1s;
     animation-iteration-count: 2;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 /*.text1 {
     animation-name: scl;
     animation-delay: 5.5s;
     animation-duration: 1s;
     animation-iteration-count: 2;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}*/
 .r2 {
     transform-origin: center;
     transform-box: fill-box;
     animation-name: gr;
     animation-delay: 3.5s;
     animation-duration: 2s;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 .r3 {
     animation-name: move2;
     animation-delay: 7.5s;
     animation-duration: 1s;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 @keyframes move1 {
     to {
         transform: translateX(200px);
    }
}
 @keyframes blink {
     from {
         opacity: 0;
    }
     to {
         opacity: 1;
    }
}
 @keyframes gr {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(359deg);
    }
}
 @keyframes scl {
     to {
         transform: scale(1.1);
    }
}  
 @keyframes move2 {
     to {
         transform: translateY(400px);
    }
}  
        }

  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
  <rect id="r1" class="r1" x="10" y="20" width="100" height="100" fill="red" />
  <rect id="r2" class="r2" x="10" y="130" width="100" height="100" fill="green" />
  <rect id="r3" class="r3" x="10" y="240" width="100" height="100" fill="blue" />

  <circle id="c1" class="c1" cx="50" cy="400" r="40" fill="orange" />
  <text class="text1" id="text1" x="80" y="500" font-size="30" fill="red">I love SVG!</text>
</svg>

In this, I have 5 elements and I am applying animation on 4 of them and r3 is the last element on which the animation applies. Is there a way I can detect the animation-delay+animation-duration for r3- the last element on which the animation applies with javascript.

Answer 1

The Web Animations API can inspect animations.

document.getAnimations() returns all animations found in the document. Each of them has an effect property, and in your case, they are all of the type KeyframeEffect.

• animation.animationName returns the animation name as stated in the CSS @keyframes declaration.
• animation.effect.target returns the element targeted by the animation.
• animation.effect.getComputedTiming().endTime returns the time the animation ends.

From there you can compare and filter the information you need.

document.getAnimations().forEach(animation => {
    console.log(
        animation.animationName,
        animation.effect.target.id,
        animation.effect.getComputedTiming().endTime
    );
});

.r1 {
     animation-name: move1;
     animation-delay: 2.5s;
     animation-duration: 1s;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 .c1 {
     animation-name: blink;
     animation-delay: 0.5s;
     animation-duration: 1s;
     animation-iteration-count: 2;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 /*.text1 {
     animation-name: scl;
     animation-delay: 5.5s;
     animation-duration: 1s;
     animation-iteration-count: 2;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}*/
 .r2 {
     transform-origin: center;
     transform-box: fill-box;
     animation-name: gr;
     animation-delay: 3.5s;
     animation-duration: 2s;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 .r3 {
     animation-name: move2;
     animation-delay: 7.5s;
     animation-duration: 1s;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 @keyframes move1 {
     to {
         transform: translateX(200px);
    }
}
 @keyframes blink {
     from {
         opacity: 0;
    }
     to {
         opacity: 1;
    }
}
 @keyframes gr {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(359deg);
    }
}
 @keyframes scl {
     to {
         transform: scale(1.1);
    }
}  
 @keyframes move2 {
     to {
         transform: translateY(400px);
    }
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
  <rect id="r1" class="r1" x="10" y="20" width="100" height="100" fill="red" />
  <rect id="r2" class="r2" x="10" y="130" width="100" height="100" fill="green" />
  <rect id="r3" class="r3" x="10" y="240" width="100" height="100" fill="blue" />

  <circle id="c1" class="c1" cx="50" cy="400" r="40" fill="orange" />
  <text class="text1" id="text1" x="80" y="500" font-size="30" fill="red">I love SVG!</text>
</svg>