Ключевой кадр CSS3 переходит в конец анимации без анимации

В связанной скрипке элемент имеет две анимации.

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;
}

Первая анимация выполняется без проблем, но вторая анимация переходит в конец анимации без каких-либо промежуточных кадров.

Почему?


css css-animations
person Tim Ferrell    schedule 02.04.2015    source источник
comment
Прошло около года с тех пор, как я задал этот вопрос, но просмотр скрипки при условии, что это больше не проблема. Это заставляет меня предположить, что это, должно быть, проблема браузера, которой больше нет.   -  person Tim Ferrell    schedule 06.09.2016

Ответы (1)


arrow_upward
1
arrow_downward

Хотя я не совсем уверен, почему анимация не работает должным образом, я смог добиться желаемого эффекта, используя разнесенные проценты в одном ключевом кадре:

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;
}
person Rorschach120    schedule 02.04.2015
comment
К сожалению, мне нужно, чтобы это были два дискретных блока ключевых кадров, поскольку время зависит от ключевого кадра. - person Tim Ferrell; 03.04.2015