Как связать несколько анимаций -webkit-transition в моем css без ключевых кадров

Question

Я пытаюсь связать несколько анимаций -webkit-transition в моем css без ключевых кадров.

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

var firstTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 1 }
var secondTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 0 }

$('theDiv').setStyles(firstTransition)

changeColor.delay(3000);

function changeColor(){

    $('theDiv').setStyles(secondTransition);
}

Вот скрипка: http://jsfiddle.net/a2co/Tn9mT/25/

Answer 1

Альтернативным подходом, который может быть немного чище, было бы использование фреймворка, такого как jQuery Transit , который может легко обрабатывать цепочки и обратные вызовы, связанные с CSS3:

Javascript:

    $('#theDiv').transition({opacity: 1}, 1000, 'in', function () { 
         //Callback
         $(this).transition({opacity: 0, delay: 3000}); });

JS Fiddle Demo

Answer 2

В вашей скрипке элемент также становится видимым: скрытый. Я думаю, что JQuery пытается быть умным. Измените 0 на 0,01.