Surprisingly, Internet Explorer is actually performing the way I want it to in this case :-) I developed a function for SVG animations using requestAnimationFrame (for simplicity, I left out the value calculations here ... but my initial test involved animating a change to the 'fill' attribute of an SVG rect). Strangely enough, IE executes the animation quickly and smoothly, while other browsers experience a noticeable delay before starting the animation. It's almost as if those browsers need to rev up an engine each time they handle this task... also, after looking at some online examples, I noticed that certain animations appear "choppy". I'm contemplating using requestAnimationFrame for IE and CSS3 keyframes for other browsers :-( but I'm hesitant. Am I overlooking something? Why does the delay occur before the animation begins?
animateViaRequestAnimationFrame = function() { //
var duration = arguments[0].duration;
// requestAnimationFrame runs at ~60 frames/second
var quantityFrameCalls = parseInt((duration/1000)*60);
i = 1;
function callFrame(){
// here, various mathematical operations are performed and target element properties are updated
i++;
if (i < quantityFrameCalls+1) {
requestAnimationFrame(function(){
callFrame();
});
} // if
} // callFrame
requestAnimationFrame(function(){
callFrame();
});
}; // animateViaRequestAnimationFrame