How to detect a CSS transition with JS

Question

EDIT

I tried animationstart and animationend. And what I found is that animationstart triggers right away then when keyframe reaches 100% animationend triggers and says the animation is finished. What I wanted to know is it possible to monitor what is happening in between or inside the animation? Like monitor each keyframe? Example as on this example I am running the animation for 4 images so when each image slides in can I monitor that and console.log("incoming image or something"). Is it possible to monitor each keyframe like when an image is sliding in?

---

I am trying to make image carousel. I have set it up with css animation so transition is happening in a loop with the css. Then after that I added two button's nextBtn and prevBtn. And they are doing their trick of sliding through the images. But I have a problem cant use both functionality I get displacement issues if I try to use both functionality if I press next to many times it messes it up basically, while the css is doing the looping animation effect. So I tried to disable the buttons when a transition has started with the eventlistener "transitionstart" but the problem with this is the javascript cant "hear or listen" if the css is doing the transition animation. But If i physically press on the button then js fires up the eventlistener off transitionstart. so how can I make javascript "hear/listen" to when the css file does the animation

here is some of the js transitionstart eventlistener code

slideContainer.addEventListener('transitionstart', () => {
  console.log('transition has started') // it cant hear and is not listening when movement animation transition is comming from the css file but it fires up if i physically press the next button
  document.getElementById("prev").setAttribute('disabled', true);
  document.getElementById("next").setAttribute('disabled', true);
})

so how do you detect a css animation transition with javascript?

the html element I wrote as:

    <div id="slider">
      <figure>
        <img src="./images/image-product-4.jpg" id="lastClone" alt="product-4" />      
        <img src="./images/image-product-1.jpg" id="product-1" alt="product-1" />
        <img src="./images/image-product-2.jpg" id="product-2" alt="product-2" />
        <img src="./images/image-product-3.jpg" id="product-3" alt="product-3" />
        <img src="./images/image-product-4.jpg" id="product-4" alt="product-4" />  
        <img src="./images/image-product-1.jpg" id="firstClone" alt="product-1" />
      </figure>
      
      <img id="next" class="next pointer" src="./images/icon-next.svg" alt="next-img">
      <img id="prev" class="previous pointer" src="./images/icon-previous.svg" alt="previous-img">
    </div>

as on the beginning of my js file I have the following logic to skip the first id="lastClone" image

const slideContainer = document.querySelector('figure');
const slideImages = document.querySelectorAll('figure img');
// counter
let counter = 1;
let size = slideImages[0].clientWidth;
slideContainer.style.transform = 'translateX(' + (-size * counter) + 'px)';

// then here I want to listen for transitionstart
slideContainer.addEventListener('transitionstart', () => {
  console.log('transition has started') // it cant hear and is not listening when movement happens from the css file
  document.getElementById("prev").setAttribute('disabled', true);
  document.getElementById("next").setAttribute('disabled', true);
})
// but it cant detect if the transition is done by the css animation

and here is my css

#slider {
  overflow: hidden;
}

#slider figure {
  width: 600%;
  /* width: 100%; */
  display: flex;
  margin: 0;
  left: 0;
  animation: 50s slider infinite;
  /* top: 50px; */
}

#slider figure img {
  float: left;
  width: 20%;
}

@keyframes slider {
  0% { left: 0; }
  20% { left: 0; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400% }
}

figure {
  position: relative;
  height: 20rem;
  overflow: hidden;
}

figure img {
  object-fit: fill;
  height: 100%;
}

Live example of my code:

https://jsfiddle.net/CustomHaven/51mLatkr/34/

---

EDIT

I tried animationstart and animationend. And what I found is that animationstart triggers right away then when keyframe reaches 100% animationend triggers and says the animation is finished. What I wanted to know is it possible to monitor what is happening in between or inside the animation? Like monitor each keyframe? Example as on this example I am running the animation for 4 images so when each image slides in can I monitor that and console.log("incoming image or something"). Is it possible to monitor each keyframe like when an image is sliding in?

Answer 1

you can try:

element.ontransitionstart = () => {
  console.log('Started transitioning');
};

with element is: getElementById....