CSS Slider - 在每张幻灯片上触发关键帧

Question

我希望在CSS滑块上的每张幻灯片后几秒内有一个元素幻灯片。动画目前仅在第一张幻灯片上发生。我正在努力做甚么可能吗？

keyframes top {
from { top: 0; right: -250px; }
to   { top: 0; right: 100px; }
}
.top {
  animation-duration: 2s;
  animation-name: top;
}

以下是我所拥有的完整演示：

https://jsfiddle.net/tekgirl/zcm2w6e1/

P.S。我希望元素保持在100px标记而不是一直向左碰撞。