CSS Несколько анимаций

Question

У меня есть div с вступлением animation и по клику добавляю новый класс под названием 'exit' с новой анимацией, но анимация не работает.

div { animation: intro steps(14) 1s 1; 
     animation-fill-mode: forwards; 
    } 

div.exit { animation: exit steps(18) 1s 1; 
      animation-fill-mode: forwards; 
     } 

Любые идеи?

Answer 1

Анимация работает, но вы говорите ей, чтобы перейти к 0px.

Если вы говорите:

@keyframes exit { 
    0% { background:yellow; } 
    100% { background:black; } 
} 

Он работает: http://jsfiddle.net/fsqp7vgk/1/

Итак, анимация работает, но сказать это еще раз, чтобы перейти в положение 0px. Решение должно указывать в .exit {left:500px;} // предыдущей позиции.

Здесь он с ходу анимации: http://jsfiddle.net/fsqp7vgk/2/

.exit {animation:exit 5s 1; left:500px; } 

@keyframes intro { 
    0% { left:100px; } 
    100% { left:500px; } 
} 
@keyframes exit { 
    0% { left:500px; } 
    100% { left:0px; } 
} 

Конечно, держать -webkit- prefix, если вы используете хром.

Answer 2

Он работает нормально, вы получили это неправильно в следующем коде.

Вы забыли добавить РХafter 500.

FIDDLE

@-webkit-keyframes exit { 
    0% { 
     left:500px; 
    } 
    100% { 
     left:0; 
    } 
}