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

@keyframesなど

by tea4two

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

html,body { background-color: #fff;
    padding-bottom: 30px;
    overflow: hidden;
    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);
}
@-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);
    }
}
@keyframes anim {
    0% { opacity: 1; }
    100% { opacity: 0;
        transform: scale3d(5,5,5);}
}

#photo {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    perspective: 500px;
    margin-bottom: 20px;
    position: relative;
}
#photo > li {
    width: 200px;
    height: 200px;    
    position: absolute;
    top: 0;
    
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.animated {
    -webkit-animation: anim .5s ease-in-out;
    -moz-animation: anim .5s ease-in-out;
    animation: anim .5s ease-in-out;
}

/* ボタン */
#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;
}

JavaScript

$(function() {
    var _p = $('#photo'),
        _child = $('#photo li'),
        _cLeng = _child.length,
        _z = 1000,
        _btn = $('#btn a');
    
    //整列function
    function aligner() {
        for (var i = 0; i < _cLeng; i++) {
            $('#photo li').eq(i).css({
                'z-index': _z
            });
            _z -= 10;
        }
        _z = 1000;
    }
    //init
    aligner();

    //ボタンクリックfunction
    _btn.on('click', function () {
        console.log('button clicked!');
        $('#photo li').eq(0).addClass('animated');
        $('.animated').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function () {
            $('#photo').append($(this));
            $(this).removeClass('animated');
            aligner();
        });
        return false;
    });
});