使用关键帧设置css幻灯片动画，使用javascript导航？

我有一个纯CSS3幻灯片的4个视频工作良好。我使用以下代码浏览幻灯片，但是因为我告诉它向左或向右25%，当幻灯片动画恢复时，它认为需要根据单击“下一步”的次数显示幻灯片

例如，如果我在两张幻灯片中单击了“下一步”，那么只要幻灯片继续播放，而不是返回到第一张幻灯片，就会显示两张空白幻灯片

我正在努力找到一个解决方案来链接这两个关键帧，这样你可以在幻灯片中导航，同时也可以知道关键帧中的当前位置

如果有人能给我指出正确的方向，我将不胜感激

CSS

JS

---

我不相信JS有任何方法知道CSS在动画中的位置，直到它到达最后。一种折衷方法是使用JS将多个CSS动画串在一起，这样您就可以知道哪些部分动画已经完成。好的，现在的设置是这样的-这样您就可以看到它是如何留下一张空白幻灯片的。如何将多个CSS动画串在一起？真的很抱歉，我对如何解决这个问题一无所知。非常感谢。用于知道一个CSS动画何时结束并触发下一个CSS动画；同时，设置一个布尔变量或递增一个计数器，这样你就知道哪些部分动画已经完成。所以，在它认为还有两张幻灯片要显示的时候，我能使用这种技术让它认为动画已经结束并回到开始吗？或者我认为这只在动画结束时才起作用是对的吗？是的，AFAIK你只能使用JS来检测CSS动画何时完全结束。

#carousel {
   width: 100%;
   overflow: hidden;
}

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

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

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

#carousel .video-list, #descriptionCarousel .description-list {
    position: relative;
    width: 400%;
    height: 100%;
    left: 0; 
    top: 0;
    bottom: 0;
    animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
    -webkit-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
    -moz-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
    -o-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
    -ms-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite; 
    animation-delay: 4.6s;
    -webkit-animation-delay: 4.6s;
    -moz-animation-delay: 4.6s;
    -ms-animation-delay: 4.6s;
    -webkit-transition: -webkit-transform 1s cubic-bezier(.93,.11,.32,.94);
    transition: -transform 1s cubic-bezier(.93,.11,.32,.94);
}

#carousel .video-list li, #descriptionCarousel .description-list li  {
    position: relative;
    width: 25%;
    height: 100%;
    overflow: hidden;
    display: inline-block;
    float: left;
}

$(function () {
var position = 0;
$('#next').on('click', function (e) {
e.preventDefault();

position = (position - 25) % 100;

$('#carousel .video-list').css('-webkit-transform', 'translateX(' + position + '%)');
$(".video-list, #timeline, .description-list").css({"animation-play-state": "paused", 
"-webkit-animation-play-state": "paused"});

});

$('#previous').on('click', function (e) {
e.preventDefault();

position = (position + 25) % 100;
position = (position > 0) ? -75 : position;

$('#carousel .video-list, #descriptionCarousel .description-list').css('-webkit-
transform', 'translateX(' + position + '%)');
$(".video-list, #timeline, .description-list").css({"animation-play-state": "paused", 
"-webkit-animation-play-state": "paused"});
});

});