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

Tags: css,animation,css3,webkit,css-animations

Problem :

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/

---

Solution :

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