CSS3幻灯片导航：目标选择器？

Question

我制作了一个简单的幻灯片，其中包含4个循环播放的视频。我试图将一些jQuery导航集成到它，但我有一个问题，即下一个/上一张幻灯片的.animate不是动画。我相信这是因为你不能应用.animate并在同一个元素上有一个css3动画。

经过广泛的研究后，我认为这可能是通过：target伪元素来实现的，但我有点不知道从哪里开始。我想知道是否有人可以指出我正确的方向或给我一些指导？

当前设置如下DEMO

UPDATE * 我遇到了这个link并且想到也许我可以将这样的东西整合到我当前的幻灯片中，但是我似乎无法让它工作。 DEMO

CSS

@-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 {
    position: relative;
    width: 400%;
    height: 100%;
    left: 0; 
    top: 0;
    bottom: 0;
    animation: slider 65s cubic-bezier(.93,.11,.32,.94) infinite;
    -webkit-animation: slider 65s cubic-bezier(.93,.11,.32,.94) infinite;
    -moz-animation: slider 65s cubic-bezier(.93,.11,.32,.94) infinite;
    -o-animation: slider 65s cubic-bezier(.93,.11,.32,.94) infinite;
    -ms-animation: slider 65s cubic-bezier(.93,.11,.32,.94) infinite;
}