How to chain multiple -webkit-transition animations in my css without keyframes

Question

I'm trying to chain multiple -webkit-transition animations in my css without keyframes.

I know that is possible if I call a keyframe animation, but I just want to overwrite the proprieties and something in this JS doesn't work:

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

Here is the fiddle: http://jsfiddle.net/a2co/Tn9mT/25/

Answer 1

In your fiddle the element also gets a visibility:hidden. I think jQuery tries to be smart. Change 0 with 0.01.

Answer 2

An alternative approach that might be a little cleaner would be to use a framework such as jQuery Transit which can easily handle chains and callbacks related to CSS3:

Javascript:

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

JS Fiddle Demo