CSS3 关键帧跳转到动画结尾不做动画

Question

在链接的 fiddle 中，一个元素有两个动画。

https://jsfiddle.net/ccqpLa6L/1/

下面是 CSS 的捕获:

@-webkit-keyframes slideInLeft { 0% { transform: translateX(-200px);  } 100% { transform: translateX(0); } }
@-webkit-keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { transform: translateX(100px); }}

.element {
    width: 250px;
    height: 75px;
    background-color: dimgrey;
    right: 0;
    margin-bottom: 10px;
    border-radius: 5px;
    -webkit-animation: slideInLeft 1s forwards, slideOutLeft 2s forwards;
    -webkit-animation-delay: 0s, 1s;
}

第一个动画没有任何问题地执行，但第二个动画跳转到其动画的末尾，没有任何间隙帧。

为什么？

Answer 1

虽然我不确定为什么动画不能正常运行，但我能够在一个关键帧中使用间隔百分比来达到预期的效果:

https://jsfiddle.net/ccqpLa6L/5/

@-webkit-keyframes slideInLeft { 
    0% { 
        transform: translateX(-200px);  
    } 
    25% {
        transform: translateX(0); 
    }
    50% {
        transform: translateX(0);
    }
    100% { 
        -webkit-transform: translateX(100px); 
    } 
}

.element {
    width: 250px;
    height: 75px;
    background-color: dimgrey;
    margin-bottom: 10px;
    border-radius: 5px;
    -webkit-animation: slideInLeft 4s forwards;
}