【CSS3】Transitions & Transfoms アニメーション

@keyframesなど

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.10.3/build/cssreset/cssreset-min.css">
<header>Photo Gallery</header>
<ul id="photo">
    <li>
        <img src="http://lorempixel.com/200/200/sports/2/" alt="" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/city/2/" alt="" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/people/6/" alt="" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/technics/4/" alt="" />
    </li>
</ul>
<p id="btn"><a href="#">Next Image</a>

</p>

CSS

@keyframes anim {
    0% {opacity: 1;}
    100% {opacity: 0; transform : scale3d (5, 5, 5);}
}
@-webkit-keyframes anim {
    0% {opacity: 1;}
    100% {opacity: 0; -webkit-transform : scale3d (5, 5, 5)}
}
@-moz-keyframes anim {
    0% {opacity: 1;}
    100% {opacity: 0;-moz-transform : scale3d (5, 5, 5)}
}
html, body {
    background-color: #fff;
    padding-bottom: 30px;
    height: 100%;
}
header {
    text-align: center;
    padding: 5px 0;
    margin-bottom: 20px;
    font-size: 120%;
    color: #fff;
    font-family: Georgin, serif;
    background: rgba(190, 150, 150, 1);
}
#photo {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    perspective: 500px;
}
#photo > li {
    position: absolute;
    top:0;
    width: 200px;
    height: 200px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
/* ボタン */
 #btn {
    width: 260px;
    margin: 0 auto;
}
#btn a {
    display: block;
    padding: .5em 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    background: orange;
    text-decoration: none;
    color: #fff;
}
#btn a:hover {
    background: lightbrown;
}
.animated {
    -webkit-animation : anim .5s ease-in-out; 
    -moz-animation : anim .5s ease-in-out;
    animation : anim .5s ease-in-out;
}

JavaScript

var _cLeng = $('#photo li').length,
    _z = 1000,
    _btn = $('#btn a');

//align images to the same place and set up the z-index
function aligner() {
    for (var i = 0; i < _cLeng; i++) {
        $('#photo li').eq(i)
            .css({'z-index': _z});
        _z -= 10;
    } //for END
    _z = 1000;
}
aligner();
//on click
_btn.click(function(){
    $('#photo li').eq(0)
    .addClass('animated');
   $('.animated').on('webkitAnimationEnd animationEnd',function(){
        $('#photo').append($(this));
       $(this).removeClass('animated');
aligner();
       });
return false;
});