I'm experimenting with chaining multiple -webkit-transition animations in my CSS without using keyframes.
I understand it's possible to achieve this by calling a keyframe animation, but I prefer to simply overwrite the properties. However, for some reason, the JavaScript code below isn't working as expected:
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);
}
You can view the demo on this Fiddle: http://jsfiddle.net/a2co/Tn9mT/25/