DIR : /home/kozerus/public_html/jkwii/js/jsdoit/jsdoit10/style.css

/home/kozerus/public_html/jkwii/js/jsdoit/jsdoit10

body, div, p {
    margin: 0;
    padding: 0;
}

#stage {
    position: relative;
    width: 442px;
    height: 402px;
    padding: 20px 0;
    border: solid 1px #111;
    background: url(http://jsdo-it-static-contents.s3.amazonaws.com/assets/x/i/q/M/xiqMO.jpg) left top no-repeat;
    text-align: center;
}

#ctrl {
    margin-top: 30px;
}

#enemy {
    
}
    #enemy.start {
        -webkit-animation: damage 2s 1 ease-in-out 5.6s;
        -moz-animation: damage 2s 1 ease-in-out 5.6s;
        -o-animation: damage 2s 1 ease-in-out 5.6s;
        -ms-animation: damage 2s 1 ease-in-out 5.6s;
    }

.explode {
    position: absolute;
    width: 270px; 
    height: 270px;
    top: 30px;
    left: 86px;
    -webkit-animation: container 8s linear;
    -moz-animation: container 8s linear;
    -o-animation: container 8s linear;
    -ms-animation: container 8s linear;
}

.light {
    position: absolute;
    opacity: 0;
    background-color: #FFFFFF;
    width: 10px;
    height: 10px;
    -webkit-transform: skew(-25deg);
    -moz-transform: skew(-25deg);
    -o-transform: skew(-25deg);
    -ms-transform: skew(-25deg);
    
    -webkit-box-shadow: 0px 0px 3px 3px rgb(156,248,249);
    -moz-box-shadow: 0px 0px 3px 3px rgb(156,248,249);
    -o-box-shadow: 0px 0px 3px 3px rgb(156,248,249);
    -ms-box-shadow: 0px 0px 3px 3px rgb(156,248,249);
    
    -webkit-animation: lightning 6s ease-in;
    -moz-animation: lightning 6s ease-in;
    -o-animation: lightning 6s ease-in;
    -ms-animation: lightning 6s ease-in;
}

.light:nth-child(1){}
.light:nth-child(2){
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    -ms-animation-delay: 0.1s;
}
.light:nth-child(3){
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
}
.light:nth-child(4){
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
}
.light:nth-child(5){
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    -ms-animation-delay: 0.4s;
}
.light:nth-child(6){
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
}
.light:nth-child(7){
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
}
.light:nth-child(8){
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    -o-animation-delay: 0.7s;
    -ms-animation-delay: 0.7s;
}
.light:nth-child(9){
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    -ms-animation-delay: 0.8s;
}
.light:nth-child(10){
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
}
.light:nth-child(11){
    -webkit-animation-delay: 1.0s;
    -moz-animation-delay: 1.0s;
    -o-animation-delay: 1.0s;
    -ms-animation-delay: 1.0s;
}
.light:nth-child(12){
    -webkit-animation-delay: 1.1s;
    -moz-animation-delay: 1.1s;
    -o-animation-delay: 1.1s;
    -ms-animation-delay: 1.1s;
};
.light:nth-child(13){
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
    -ms-animation-delay: 1.2s;
}
.light:nth-child(14){
    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
    -o-animation-delay: 1.3s;
    -ms-animation-delay: 1.3s;
}
.light:nth-child(15){
    -webkit-animation-delay: 1.4s;
    -moz-animation-delay: 1.4s;
    -o-animation-delay: 1.4s;
    -ms-animation-delay: 1.4s;
}
.light:nth-child(16){
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    -ms-animation-delay: 1.5s;
}
.light:nth-child(17){
    -webkit-animation-delay: 1.6s;
    -moz-animation-delay: 1.6s;
    -o-animation-delay: 1.6s;
    -ms-animation-delay: 1.6s;
}
.light:nth-child(18){
    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
    -o-animation-delay: 1.7s;
    -ms-animation-delay: 1.7s;
}
.light:nth-child(19){
    -webkit-animation-delay: 1.8s;
    -moz-animation-delay: 1.8s;
    -o-animation-delay: 1.8s;
    -ms-animation-delay: 1.8s;
}
.light:nth-child(20){
    -webkit-animation-delay: 1.9s;
    -moz-animation-delay: 1.9s;
    -o-animation-delay: 1.9s;
    -ms-animation-delay: 1.9s;
}

/**
 * ---------------------------------------------------
 *  Definition of animation.
 * ---------------------------------------------------
 */

@-webkit-keyframes container {
    0%{
        -webkit-transform: scale(1) rotate(0deg);
    }
    35%{
        -webkit-transform: scale(0.6) rotate(180deg);
    }
    70%{
        -webkit-transform: scale(0.3) rotate(360deg);
    }
    71%{
        -webkit-transform: scale(1.0);
    }
    100%{
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes container {
    0%{
        -moz-transform: scale(1) rotate(0deg);
    }
    35%{
        -moz-transform: scale(0.6) rotate(180deg);
    }
    70%{
        -moz-transform: scale(0.3) rotate(360deg);
    }
    71%{
        -moz-transform: scale(1.0);
    }
    100%{
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes lightning {
    0%{
        opacity: 0.5;
        -webkit-transform: scale(1) rotateX(0deg) rotateY(0deg);
    }
    5%{
        opacity: 1.0;
        -webkit-transform: scale(1) rotateX(30deg) rotateY(30deg);
    }
    60%{
        opacity: 0.8;
        -webkit-transform: scale(1) rotateX(720deg) rotateY(720deg);
    }
    61%{
        opacity: 0;
        -webkit-transform: scale(0.1) rotateX(720deg) rotateY(720deg);
    }
    94%{
        opacity: 0;
        background-color: #FFFFFF;
        -webkit-border-radius: 0;
        -webkit-transform: scale(0.1) rotateX(720deg) rotateY(720deg);
    }
    95%{
        opacity: 0.9;
        background-color: #FDF89C;
        -webkit-box-shadow: 0px 0px 2px 2px rgb(254,143,51);
        -webkit-transform: scale(5) rotateX(720deg) rotateY(720deg);
        -webkit-border-radius: 25px;
    }
    100%{
        background-color: #000;
        -webkit-box-shadow: 0px 0px 2px 2px rgb(244,100,39);
        -webkit-border-radius: 25px;
        -webkit-transform: scale(3) rotateX(720deg) rotateY(720deg);
    }
}
@-moz-keyframes lightning {
    0%{
        opacity: 0.5;
        -moz-transform: scale(1) rotate(0deg);
    }
    5%{
        opacity: 1.0;
        -moz-transform: scale(1) rotate(30deg);
    }
    60%{
        opacity: 0.8;
        -moz-transform: scale(1) rotate(720deg);
    }
    61%{
        opacity: 0;
        -moz-transform: scale(0.1) rotate(720deg);
    }
    94%{
        opacity: 0;
        background-color: #FFFFFF;
        -moz-border-radius: 0;
        -moz-transform: scale(0.1) rotate(720deg);
    }
    95%{
        opacity: 0.9;
        background-color: #FDF89C;
        -moz-box-shadow: 0px 0px 2px 2px rgb(254,143,51);
        -moz-transform: scale(5) rotate(720deg);
        -moz-border-radius: 25px;
    }
    100%{
        background-color: #000;
        -moz-box-shadow: 0px 0px 2px 2px rgb(244,100,39);
        -moz-border-radius: 25px;
        -moz-transform: scale(3) rotate(720deg);
    }
}

@-webkit-keyframes damage {
    0% { -webkit-transform: translate(1px, 1px); }
    3% { -webkit-transform: translate(1px, 1px); }
    4% { -webkit-transform: translate(0px, 0px); }
    7% { -webkit-transform: translate(0px, 0px); }
    8% { -webkit-transform: translate(-1px, 0px); }
    10% { -webkit-transform: translate(-1px, 0px); }
    11% { -webkit-transform: translate(1px, -1px); opacity: 1;}
    13% { -webkit-transform: translate(1px, -1px); opacity: 0;}
    14% { -webkit-transform: translate(0px, 0px); opacity: 1;}
    17% { -webkit-transform: translate(0px, 0px); }
    18% { -webkit-transform: translate(-1px, -1px); }
    20% { -webkit-transform: translate(-1px, -1px); }
    21% { -webkit-transform: translate(1px, 0px); }
    23% { -webkit-transform: translate(1px, 0px); }
    24% { -webkit-transform: translate(-1px, 1px); }
    27% { -webkit-transform: translate(-1px, 1px); }
    28% { -webkit-transform: translate(1px, -1px); }
    30% { -webkit-transform: translate(1px, -1px); }
    31% { -webkit-transform: translate(0px, 0px); }
    33% { -webkit-transform: translate(0px, 0px); }
    34% { -webkit-transform: translate(-1px, 0px); }
    37% { -webkit-transform: translate(-1px, 0px); }
    38% { -webkit-transform: translate(1px, 1px); }
    40% { -webkit-transform: translate(1px, 1px); }
    41% { -webkit-transform: translate(-1px, 0px); }
    43% { -webkit-transform: translate(-1px, 0px); }
    44% { -webkit-transform: translate(0px, -1px); }
    47% { -webkit-transform: translate(0px, -1px); }
    48% { -webkit-transform: translate(-1px, 1px); }
    50% { -webkit-transform: translate(-1px, 1px); }
    51% { -webkit-transform: translate(0px, 1px); opacity: 1;}
    53% { -webkit-transform: translate(0px, 1px); opacity: 0;}
    54% { -webkit-transform: translate(-1px, -1px); opacity: 1;}
    57% { -webkit-transform: translate(-1px, -1px); }
    58% { -webkit-transform: translate(1px, 0px); }
    60% { -webkit-transform: translate(1px, 0px); }
    61% { -webkit-transform: translate(1px, 2px); }
    63% { -webkit-transform: translate(1px, 2px); }
    64% { -webkit-transform: translate(-1px, 1px); }
    67% { -webkit-transform: translate(-1px, 1px); }
    68% { -webkit-transform: translate(1px, -1px); }
    70% { -webkit-transform: translate(1px, -1px); }
    71% { -webkit-transform: translate(2px, 0px); }
    73% { -webkit-transform: translate(2px, 0px); }
    74% { -webkit-transform: translate(0px, -2px); }
    77% { -webkit-transform: translate(0px, -2px); }
    78% { -webkit-transform: translate(-1px, 0px); }
    80% { -webkit-transform: translate(-1px, 0px); }
    81% { -webkit-transform: translate(-2px, 1px); opacity: 1;}
    83% { -webkit-transform: translate(-2px, 1px); opacity: 0;}
    84% { -webkit-transform: translate(0px, 2px); opacity: 1;}
    87% { -webkit-transform: translate(0px, 2px); }
    88% { -webkit-transform: translate(1px, -1px); }
    90% { -webkit-transform: translate(1px, -1px); }
    91% { -webkit-transform: translate(2px, 1px); opacity: 1;}
    93% { -webkit-transform: translate(2px, 1px); opacity: 0;}
    94% { -webkit-transform: translate(-2px, 0px); opacity: 1;}
    97% { -webkit-transform: translate(-2px, 0px); }
    98% { -webkit-transform: translate(0px, 0px); }
    100% { -webkit-transform: translate(0px, 0px); }
}
@-moz-keyframes damage {
    0% { -moz-transform: translate(1px, 1px); }
    3% { -moz-transform: translate(1px, 1px); }
    4% { -moz-transform: translate(0px, 0px); }
    7% { -moz-transform: translate(0px, 0px); }
    8% { -moz-transform: translate(-1px, 0px); }
    10% { -moz-transform: translate(-1px, 0px); }
    11% { -moz-transform: translate(1px, -1px); opacity: 1;}
    13% { -moz-transform: translate(1px, -1px); opacity: 0;}
    14% { -moz-transform: translate(0px, 0px); opacity: 1;}
    17% { -moz-transform: translate(0px, 0px); }
    18% { -moz-transform: translate(-1px, -1px); }
    20% { -moz-transform: translate(-1px, -1px); }
    21% { -moz-transform: translate(1px, 0px); }
    23% { -moz-transform: translate(1px, 0px); }
    24% { -moz-transform: translate(-1px, 1px); }
    27% { -moz-transform: translate(-1px, 1px); }
    28% { -moz-transform: translate(1px, -1px); }
    30% { -moz-transform: translate(1px, -1px); }
    31% { -moz-transform: translate(0px, 0px); }
    33% { -moz-transform: translate(0px, 0px); }
    34% { -moz-transform: translate(-1px, 0px); }
    37% { -moz-transform: translate(-1px, 0px); }
    38% { -moz-transform: translate(1px, 1px); }
    40% { -moz-transform: translate(1px, 1px); }
    41% { -moz-transform: translate(-1px, 0px); }
    43% { -moz-transform: translate(-1px, 0px); }
    44% { -moz-transform: translate(0px, -1px); }
    47% { -moz-transform: translate(0px, -1px); }
    48% { -moz-transform: translate(-1px, 1px); }
    50% { -moz-transform: translate(-1px, 1px); }
    51% { -moz-transform: translate(0px, 1px); opacity: 1;}
    53% { -moz-transform: translate(0px, 1px); opacity: 0;}
    54% { -moz-transform: translate(-1px, -1px); opacity: 1;}
    57% { -moz-transform: translate(-1px, -1px); }
    58% { -moz-transform: translate(1px, 0px); }
    60% { -moz-transform: translate(1px, 0px); }
    61% { -moz-transform: translate(1px, 2px); }
    63% { -moz-transform: translate(1px, 2px); }
    64% { -moz-transform: translate(-1px, 1px); }
    67% { -moz-transform: translate(-1px, 1px); }
    68% { -moz-transform: translate(1px, -1px); }
    70% { -moz-transform: translate(1px, -1px); }
    71% { -moz-transform: translate(2px, 0px); }
    73% { -moz-transform: translate(2px, 0px); }
    74% { -moz-transform: translate(0px, -2px); }
    77% { -moz-transform: translate(0px, -2px); }
    78% { -moz-transform: translate(-1px, 0px); }
    80% { -moz-transform: translate(-1px, 0px); }
    81% { -moz-transform: translate(-2px, 1px); opacity: 1;}
    83% { -moz-transform: translate(-2px, 1px); opacity: 0;}
    84% { -moz-transform: translate(0px, 2px); opacity: 1;}
    87% { -moz-transform: translate(0px, 2px); }
    88% { -moz-transform: translate(1px, -1px); }
    90% { -moz-transform: translate(1px, -1px); }
    91% { -moz-transform: translate(2px, 1px); opacity: 1;}
    93% { -moz-transform: translate(2px, 1px); opacity: 0;}
    94% { -moz-transform: translate(-2px, 0px); opacity: 1;}
    97% { -moz-transform: translate(-2px, 0px); }
    98% { -moz-transform: translate(0px, 0px); }
    100% { -moz-transform: translate(0px, 0px); }
}