为什么不显示？之后？

Question

所以，我试图用关键帧在两个图像之间切换，但是我想让它们从左边或右边滑动进来。 ::之前的图像显示但是:: after图像根本没有出现。这是我的css https://gist.github.com/wiafe/73246883a0f608274715

的链接

.macbook {
    max-width: 760px;
}

.macbook:before {
    content: url(../images/application-screen.png);
    position: relative;
    left: 32px;
    top: 157px;
    transform: scaleY(0.9);
    opacity: 0;
    animation: c3 8s linear infinite;
    z-index: 1;
}

.macbook:after {
    position: relative;
    content: url(../images/glass-screen-2.png);
    transform: scaleY(1.155) scaleX(0.999);
    bottom: 730px;
    left: 33px;
    opacity: 0;
    animation: c5 6s ease-in infinite;
    z-index: 2;
}

.macbook img {
    position: relative;
    bottom: 333px;
}

@-webkit-keyframes c3{

  0% {opacity: 1; left: 0;}
  25%{opacity:1; left: 25px;}
  50%{opacity: 1; left: 50px;}
  70%{opacity: 0; left: 70px;}
  90%{opacity: 0; left: 90px;}
  95%{opacity: 0; left: 95px;}
  100% {opacity: 0; left: 100px;} 
}

@-keyframes c5{

  0% {opacity: 0; }
  25%{opacity: 0;}
  50%{opacity: 0; }
  70%{opacity: 0; }
  90%{opacity: 1; }
  95%{opacity: 1; }
  100% {opacity: 1; } 
}

我正在努力坚持使用CSS来做到这一点，因为我的jquery并不那么强大。但是，如果有一种方法可以在jquery中进行，请发送给我那个方向，谢谢！