JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head><title>test safari 5.1 animate CSS version</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;
}

JavaScript

/* Broken ONLY in Safari 5.1
   Works in Safari 5.0, Safari 6.0, Chrome, Firefox, Opera and even IE9

   If I don't rotate the card, it works fine.

   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", function (Y)
{
    var cards = [];
    for(var i=0;i<13;i++)
    {
        cards.push(createCard());
    }

    function animateCard(card, i)
    {
        var pre = (Y.UA.webkit ? "Webkit" : (Y.UA.gecko ? "Moz" : (Y.UA.opera ? "O" : (Y.UA.ie ? "ms" : ""))));
        
        card.setStyle(pre + "TransitionProperty", "top, left, -" + pre.toLowerCase() + "-transform");
        card.setStyle(pre + "TransitionDuration", "0.5s, 0.5s, 0.5s");
        card.setStyle("top", "100px");
        card.setStyle("left", (100+(i*(128*0.20))) + "px");
        card.setStyle(pre + "Transform", "rotate(" + (i*5) + "deg)");
    }
        
    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;
    }
});