Question

在链接小提琴中，元素有两个动画。

下面是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;
}

CSS3关键帧在没有动画的情况下跳转到动画结束

1 个答案: