CSS3 Swipe Card Animation

Create for a project for uzERP, we're creating a time clock machine for factory employees.

HTML

<div id="box"></div>

<img class="left" src="http://dl.dropbox.com/u/813705/swipe/swipe-left.png" />
<img class="card" src="http://dl.dropbox.com/u/813705/swipe/card.png" />
<img class="right" src="http://dl.dropbox.com/u/813705/swipe/swipe-right.png" />

CSS

@-webkit-keyframes resize {
    0% {
        top: 10px;
        opacity: 0;
    }
    10% {
        top: 10px;
        opacity: 1;
    }
    50% {
        top: 10px;
        opacity: 1;
    }
    65% {
        top: 260px;
        opacity: 1;
    }
    75% {
        top: 260px;
        opacity: 0;
    }
    100% {
        top: 260px;
        opacity: 0;
    }
}

img {
     position: absolute;  
}

.left {
     top: 100px;
     left: 100px;  
    z-index: 3;
}

.right {
     top: 107px;
      left: 165px;  
    z-index: 1
}
.card {
    
     z-index: 2;  
   left: 100px;
    top: 50px;
}
.card {
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: ease-in-out;
}