css-animation

by kazu69

HTML

<div id="wrapper">
    <div id="enemy"></div>
    <div id="effect"></div>
    <div id="attack"></div>
</div>
<dvi id="control"></dvi>

CSS

body{
           background: #000;
           text-align: center;
       }
       #wrapper{
           position: relative;
           width:200px;
           height:164px;
           margin: 20px auto;
           overflow: hidden;
           border: 4px solid #fff;
           border-radius: 3px;
       }
       #enemy{
           position: absolute;
           top:-156px;
           left:0;
           width:176px;
           height:156px;
           margin: 0 17px;
           background-image: url(http://kazu69.net/blog/wp-content/uploads/2011/12/enemy.jpg);
       }
       #attack-btn {
           width:192px;
           margin: 0 auto;
           padding: 3px;
           color:#000;
           cursor:pointer;
           -webkit-appearance: button;
           -moz-appearance: button;
           -ms-appearance: button;
           -o-appearance: button;
           appearance: button;
       }
       @-webkit-keyframes enemy-show {
           0% {
               top:-150px;
               opacity: .5;
           }
           12.5% {
               top:10px;
           }
           25% {
               top:-0;
           }
           37.5% {
               top:10px;
           }
           50% {
               top: 0;
           }
           62.5% {
               top:10px;
           }
           75% {
               top:0;
           }
           87.5%{
               top:10px;
           }
           100% {
               top:10px;
               opacity: 1;
           }
       }
       @-moz-keyframes enemy-show {
           0% {
               top:-150px;
               opacity: .5;
           }
           12.5% {
               top:10px;
           }
           25% {
               top:-0;
           }
           37.5% {
               top:10px;
           }
           50% {
               top: 0;
           }
           62.5% {
               top:10px;
           }
           75% {
               top:0;
           }
           87.5%{
               top:10px;
...

JavaScript

var setClass = function(targetId, className) {
    $('#' + targetId).addClass(className);
}

var removeClass = function(targetId, className) {
    $('#' + targetId).removeClass(className);
}

setClass('enemy', 'enemy-show');
$('#enemy').bind('mozAnimationEnd webkitAnimationEnd animationend',function() {
    $('#enemy').css({
        'top': '10px'
    });
    removeClass('enemy', 'enemy-show');
    $div = $(document.createElement('div')).text('攻撃').attr({
        'id': 'attack-btn'
    });
    $('#control').append($div);
    $div.on('click', function() {
        $('#enemy').unbind();
        setClass('attack', 'attack');
        setClass('enemy', 'dameged');
        $(this).remove();
        $('#attack').bind('mozAnimationEnd webkitAnimationEnd animationend',function() {
            removeClass('enemy', 'dameged');
            setClass('enemy', 'enemy-hide');
        });
    });
});