JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head><title>test safari 5.1 animate</title></head>
    <body>
        <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
    </body>
</html>

CSS

.card
{
    background-image:url(http://staticworldofsolitaire.com/decks/paris/4/1s.png);
    position: absolute;
    left: -128px;
    top: -199px;
    width: 128px;
    height: 199px;
    -webkit-transform: rotate(0deg);
}

JavaScript

/* This code works in almost all browsers: Chrome, Firefox, Opera, IE9 AND Safari 5.0 and Safari 6.0
   In Safari 5.1 however, only the first card animates, the rest don't.
   Removing the transform rotate fixes the problem, but the whole point is to have rotation

   Things I have tried:
    - Adding "-webkit-transform-style: preserve-3d;" to the .card CSS
    - Adding "-webkit-backface-visibility: hidden;" to the .card CSS
*/

YUI().use("dom", "node", "anim", "yui-anim-rotate", function (Y)
{
    var cards = [];
    for(var i=0;i<13;i++)
    {
        cards.push(createCard());
    }

    function animateCard(card, i)
    {
        var props =
        {
            node     : card,
            duration : (500/1000),
            from     : { left : -128,               top : -199, rotate : 0   },
            to       : { left : 100+(i*(128*0.20)), top : 100,  rotate : i*5 }
        };
        new Y.Anim(props).run();
    }
        
    cards.forEach(function(card, i)
    {
      setTimeout(function() { animateCard(card, i); }, i*75);
    });

    function createCard(i)
    {
        var card = Y.Node.create("<div>").addClass("card");
        Y.one(document.body).append(card);
        return card;
    }
});

YUI.add("yui-anim-rotate", function(Y)
{
    var BROWSER_STYLE_PREFIX = (Y.UA.webkit ? "WebkitT" : (Y.UA.gecko ? "MozT" : (Y.UA.opera ? "OT" : (Y.UA.ie ? "msT" : "t"))));
    
    Y.Anim.behaviors.rotate =
    {
        set : function(anim, att, from, to, elapsed, duration, fn)
        {
            var targetAngle = fn(elapsed, +from, +to-+from, duration);
            if(targetAngle<0)
                targetAngle = (360-(targetAngle*-1));
            else if(targetAngle>360)
                targetAngle-=360;
            
            setTimeout(function() {
            anim._node.setStyle(BROWSER_STYLE_PREFIX + "ransform", "rotate(" + targetAngle + "deg)");
            }, 0);
        }
    };
}, "1.0", { requires : ["anim"] });