js 翻牌活动效果

<div class="index_main">
    <ul class="index_card">
        <li class="one"><img src="{:ADDON_APP_PATH}/img/card.png" /></li>
        <li class="two"><img src="{:ADDON_APP_PATH}/img/card.png" /></li>
        <li class="third"><img src="{:ADDON_APP_PATH}/img/card.png" /></li>
    </ul>
</div>

.index_main{ margin: 0 25px; padding-top: 15px;}
.index_card{ position: relative; height: 122px;}
.index_card li{  30%; padding: 0 1.5%; position: absolute; top: 0;}
.index_card li img{  100%; display: block;}
.index_card .one{ left: 0;}
.index_card .two{ left: 33%;}
.index_card .third{ left: 66%;}
.index_card .one.choose{ z-index: 2;
    animation: onePlay 1s linear 1;
    -webkit-animation: onePlay 1s linear 1;
    -moz-animation: onePlay 1s 0s linear 1;
}
.index_card .two.choose{ z-index: 2;
    animation: twoPlay 1s linear 1;
    -webkit-animation: twoPlay 1s linear 1;
    -moz-animation: twoPlay 1s 0s linear 1;
}
.index_card .third.choose{ z-index: 2;
    animation: thirdPlay 1s linear 1;
    -webkit-animation: thirdPlay 1s linear 1;
    -moz-animation: thirdPlay 1s 0s linear 1;
}

/*动画*/
@keyframes onePlay{
    0%   { left: 0%; transform:scale(1) rotateY(0deg);}
    20%  { left: 6%; transform:scale(1.1) rotateY(180deg);}
    40%  { left: 12%; transform:scale(1.2) rotateY(0deg);}
    60%  { left: 18%; transform:scale(1.3) rotateY(180deg);}
    80%  { left: 24%; transform:scale(1.4) rotateY(0deg);}
    100% { left: 33%; transform:scale(1.5) rotateY(180deg);}
}
@-webkit-keyframes onePlay{
    0%   { left: 0%; -webkit-transform:scale(1) rotateY(0deg);}
    20%  { left: 6%; -webkit-transform:scale(1.1) rotateY(180deg);}
    40%  { left: 12%; -webkit-transform:scale(1.2) rotateY(0deg);}
    60%  { left: 18%; -webkit-transform:scale(1.3) rotateY(180deg);}
    80%  { left: 24%; -webkit-transform:scale(1.4) rotateY(0deg);}
    100% { left: 33%; -webkit-transform:scale(1.5) rotateY(180deg);}
}
@-moz-keyframes onePlay{
    0%   { left: 0%; -moz-transform:scale(1) rotateY(0deg);}
    20%  { left: 6%; -moz-transform:scale(1.1) rotateY(180deg);}
    40%  { left: 12%; -moz-transform:scale(1.2) rotateY(0deg);}
    60%  { left: 18%; -moz-transform:scale(1.3) rotateY(180deg);}
    80%  { left: 24%; -moz-transform:scale(1.4) rotateY(0deg);}
    100% { left: 33%; -moz-transform:scale(1.5) rotateY(180deg);}
}

@keyframes twoPlay{
    0%   { transform:scale(1) rotateY(0deg);}
    20%  { transform:scale(1.1) rotateY(180deg);}
    40%  { transform:scale(1.2) rotateY(0deg);}
    60%  { transform:scale(1.3) rotateY(180deg);}
    80%  { transform:scale(1.4) rotateY(0deg);}
    100% { transform:scale(1.5) rotateY(180deg);}
}
@-webkit-keyframes twoPlay{
    0%   { -webkit-transform:scale(1) rotateY(0deg);}
    20%  { -webkit-transform:scale(1.1) rotateY(180deg);}
    40%  { -webkit-transform:scale(1.2) rotateY(0deg);}
    60%  { -webkit-transform:scale(1.3) rotateY(180deg);}
    80%  { -webkit-transform:scale(1.4) rotateY(0deg);}
    100% { -webkit-transform:scale(1.5) rotateY(180deg);}
}
@-moz-keyframes twoPlay{
    0%   { -moz-transform:scale(1) rotateY(0deg);}
    20%  { -moz-transform:scale(1.1) rotateY(180deg);}
    40%  { -moz-transform:scale(1.2) rotateY(0deg);}
    60%  { -moz-transform:scale(1.3) rotateY(180deg);}
    80%  { -moz-transform:scale(1.4) rotateY(0deg);}
    100% { -moz-transform:scale(1.5) rotateY(180deg);}
}

@keyframes thirdPlay{
    0%   { left: 66%; transform:scale(1) rotateY(0deg);}
    20%  { left: 60%; transform:scale(1.1) rotateY(180deg);}
    40%  { left: 54%; transform:scale(1.2) rotateY(0deg);}
    60%  { left: 48%; transform:scale(1.3) rotateY(180deg);}
    80%  { left: 42%; transform:scale(1.4) rotateY(0deg);}
    100% { left: 33%; transform:scale(1.5) rotateY(180deg);}
}
@-webkit-keyframes thirdPlay{
    0%   { left: 66%; -webkit-transform:scale(1) rotateY(0deg);}
    20%  { left: 60%; -webkit-transform:scale(1.1) rotateY(180deg);}
    40%  { left: 54%; -webkit-transform:scale(1.2) rotateY(0deg);}
    60%  { left: 48%; -webkit-transform:scale(1.3) rotateY(180deg);}
    80%  { left: 42%; -webkit-transform:scale(1.4) rotateY(0deg);}
    100% { left: 33%; -webkit-transform:scale(1.5) rotateY(180deg);}
}
@-moz-keyframes thirdPlay{
    0%   { left: 66%; -moz-transform:scale(1) rotateY(0deg);}
    20%  { left: 60%; -moz-transform:scale(1.1) rotateY(180deg);}
    40%  { left: 54%; -moz-transform:scale(1.2) rotateY(0deg);}
    60%  { left: 48%; -moz-transform:scale(1.3) rotateY(180deg);}
    80%  { left: 42%; -moz-transform:scale(1.4) rotateY(0deg);}
    100% { left: 33%; -moz-transform:scale(1.5) rotateY(180deg);}
}