Добавьте css анимацию ключевого кадра при каждом переключении изображения

Question

У меня есть тег изображения, где каждые 3 секунды он меняется на другое изображение, и я хочу добавить в него стиль анимации, при котором каждый раз при переключении изображения будет действовать ключевой кадр css анимации. Кажется, я не могу понять, как применить анимацию в javascript. Вот что я пробовал до сих пор:

Мой javascript,

let indexObj = {

imageChange: document.getElementById("imageChanger"), //id of the image tag
imagePath: ["images/Ps_Logo.png", "images/Pencil.png"],
indexPos: 0,


ChangeImage: () => {

    setInterval(() => {
        indexObj.imageChange.src = indexObj.imagePath[indexObj.indexPos];
        indexObj.imageChange.classList.add("imageToChange"); // imageToChange is the name of the css class where the animation is written on.
        indexObj.indexPos++;
        if (indexObj.indexPos === 2) {
            indexObj.indexPos = 0;
        }
    }, 3000)
  }
}

        indexObj.ChangeImage();

Вот мой код css. Класс и анимация ключевой кадр:

.imageToChange {
height: 55px;
width: 70x;
border-radius: 20%;
animation-name: animateImage;
animation-duration: .5s;
animation-fill-mode: forwards;
}

@keyframes animateImage {
0% {
    margin-top: 2px;
    opacity: 0;
}
50% {
    margin-top: 7;
}
100% {
    opacity: 1;
    margin-top: 9px;
 }
}

Answer 1

Вы пробовали добавлять и удалять (включать и выключать) класс animateImage? Попробуйте добавить класс анимации и затем включить его после завершения анимации.

Вы можете использовать методы addClass("imageToChange") и removeClass("imageToChange") jQuery: https://api.jquery.com/addClass/

Или с помощью Vanilla JS переключить класс: https://www.w3schools.com/howto/howto_js_toggle_class.asp

Просто обязательно перезапустите событие нужное количество раз.

Answer 2

Анимация запускается только в первый раз, когда вы добавляете класс .imageToChange (и он работает с вашим кодом).

Вам нужно либо удалить класс после анимации, либо переключиться на другой класс каждый время перебора изображения.