Just a random thing I did with some spare time.

script.js

var cards = [];

function initDeck(){
    for(var cardNum = 1; cardNum < 14; cardNum++){
        for(var i = 0; i < 4; i++){
            var suit = i;
            switch(i){
                case 0:
                    suit = "\u2665";
                    break;
                case 1:
                    suit = "\u2660";
                    break;
                case 2:
                    suit = "\u2663";
                    break;
                case 3:
                    suit = "\u2666";
                    break;
            }
            cards.push({suit : suit, value : cardNum});
        }
    }
    layout();
}

function layout(){
    var docFrag = document.createDocumentFragment();
    
    for(var i = 0; i < cards.length; i++){
        var card = document.createElement("div");
        card.className += " card";
        card.setAttribute("data-number", cards[i].value);
        
        card.setAttribute("data-suit", cards[i].suit);
        docFrag.appendChild(card);
        document.body.appendChild(docFrag);
        card.style.left = 60+ i*4 +"px";
        card.style.top = 60+ i*4 +"px";
        card.style.webkitAnimationDuration = 1+(i*.1) + "s"; 
    }
}

initDeck();

style.css

.card {
    background: #fff;
    position: absolute;
    -webkit-border-radius: 6px;
    height: 80px;
    width: 60px;
    border: 1px solid #000;
    float:left;
    -webkit-transform-origin: 50% 100%;
    -webkit-animation-name:             dostuff; 
    -webkit-animation-duration:         3s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
    
}
.card:after, .card:before { 
    content: attr(data-number) " " attr(data-suit);
    position: absolute;
}
.card:before { 
    top: 10px;
    left: 10px;
}
.card:after { 
    bottom: 10px;
    right: 10px;
    -webkit-transform: rotate(180deg);
}

@-webkit-keyframes dostuff{
  0%{
        left:0%;
    -webkit-transform: rotate(0deg);
  }
  50%{ 
    left:100%;
    -webkit-transform: rotate(360deg);
  }
  100%{
    left:0%;
    -webkit-transform: rotate(0deg);
  }
}
​