Javascript iPhone上的Safari运行；CSS动画由类添加；只是第一次

我在iPhone6S软件版本14.4.1的Safari中遇到了这种行为

代码如下：

CSS

有3个元素有单独的动画；carousel__幻灯片使用淡入关键帧，cta__标题使用缩放关键帧和按钮--carousel使用向上移动和淡入关键帧。 以下是css文件中的关键帧声明：

关键帧

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes scale-down {
    0% {
        transform: scale(1.3);
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -o-transform: scale(1.3);
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
}

@-webkit-keyframes scale-down {
    0% {
        transform: scale(1.3);
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -o-transform: scale(1.3);
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
}

@keyframes move-upwards {
    0% {
        transform: translateY(5rem);
        -webkit-transform: translateY(5rem);
        -moz-transform: translateY(5rem);
        -ms-transform: translateY(5rem);
        -o-transform: translateY(5rem);
    }
    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}

@-webkit-keyframes move-upwards {
    0% {
        transform: translateY(5rem);
        -webkit-transform: translateY(5rem);
        -moz-transform: translateY(5rem);
        -ms-transform: translateY(5rem);
        -o-transform: translateY(5rem);
    }
    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}

以及我在其中添加和删除类的函数：

function changeSlide(currentSlide, targetSlide) {
        currentSlide.classList.remove('carousel__slide--active');
        targetSlide.classList.add('carousel__slide--active');
}

我添加了carousel_uuslide——活动类来触发目标幻灯片上的动画，并在传递到下一张幻灯片时将其移除。这段代码在firefox上运行平稳，在我的桌面上运行勇敢，在我的android手机上运行firefox。在iPhone上，在第一次幻灯片旋转期间，一切看起来都正常。每张幻灯片及其已设置动画的子元素运行其动画。但是当它返回到第一张幻灯片时，第一张幻灯片上的动画都不起作用了，更奇怪的是，其他幻灯片上的cta__标题和按钮——旋转木马动画起作用了，但是主幻灯片淡入动画（由上面提到的类添加）也不起作用。是否Safari会缓存元素并忽略动画或类似的内容？还是我遗漏了Safari实现的一些要点

提前感谢,

function changeSlide(currentSlide, targetSlide) {
        currentSlide.classList.remove('carousel__slide--active');
        targetSlide.classList.add('carousel__slide--active');
}