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.