Safari (mobile + desktop) grouping CSS Keyframe Animations

Question

I'm having trouble with Safari creating an effect that mimics bubbles floating into the air, except with feathers. I've omitted some code to get to the gist of things. The url to the work-in-progress is here.

Here are the webkit styles for my animated objects.

@-webkit-keyframes f1 {
  100% {
    -webkit-transform: translateX(-25px) translateY(-350px); 
  } 
}

.feather {
  /* other styling omitted */
  -webkit-animation-duration: 7s;
  -webkit-animation-timing-function: linear;
}

And the javascript to create a bunch of objects.

animateFeathers = function() {
    var $feather = $('<img>'),
    $feather.addClass('feather animated');
    $feather.attr('src','img/feather.png');
    $feather.css('-webkit-animation-name','f1');
    $featherContainer.append($feather);

    setTimeout(function() {
        $feather.remove();
    }, 9000);

    // random time to create next feather
    var rTimeout = Math.random() * maxTime + minTime;
    setTimeout(animateFeathers, rTimeout);
}

If you visit the link in Chrome or Firefox you'll see the intended effect. However in Safari (again, mobile or desktop) the feathers stack and only animate in a group every 7 seconds. I'd like for them to begin their animation as soon as they are inserted into the DOM. Any ideas on this?

Answer 1

Had to resort to using a canvas as I really couldn't get performance working on Safari. Took quite a few hours, but its working:

http://poetreatapp.com/