JSFiddle - React, Tailwind, and code Playground
HTML
<div id="screen">
<div id="warp">
<div id="man">
<div id="animation-01">
<img id="Head"src="http://www.centerwow.com/stackoverflow/animation/Head.png" />
</div><!-- END animation-01-->
<div id="animation-02">
<img id="Body"src="http://www.centerwow.com/stackoverflow/animation/Body.png" />
</div><!-- END animation-02-->
<div id="animation-03">
<img id="Left_Hand"src="http://www.centerwow.com/stackoverflow/animation/Left_Hand.png" />
<div class="axis"> </div>
</div><!-- END animation-03-->
<div id="animation-04">
<img id="Right_Leg"src="http://www.centerwow.com/stackoverflow/animation/Left_Leg.png" />
</div><!-- END animation-04-->
<div id="animation-05">
<img id="Right_Hand"src="http://www.centerwow.com/stackoverflow/animation/Right_Hand.png" />
<div class="axis"> </div>
</div><!-- END animation-05-->
<div id="animation-06">
<img id="Left_Leg"src="http://www.centerwow.com/stackoverflow/animation/Right_Leg.png" />
</div><!-- END animation-06-->
</div><!-- END MEN -->
<div id="manS">
<img id="ManStick"src="http://www.centerwow.com/stackoverflow/animation/manStick.PNG" />
</div><!-- END menS -->
</div><!-- END warp -->
</div><!-- end TSCREEN -->
CSS
#screen {
background: #6633CC;
border:1px solid #eee;
height:600px;
width:800px;
top:0;
left:0;
margin:0;
padding:0;
/*opacity:0;*/
overflow:hidden;
position:absolute;
}
#warp{
margin:30px auto;
border-style:solid;
border-width:5px;
border-color:#98bf21;
width:420px;
height:370px;
}
#man{
background: #6666CC;
margin:0;
float:left;
border-style:solid;
border-width:5px;
border-color:#98bf21;
width:200px;
height:363px;
}
#manS{
background: #6666AA;
margin:0;
float:right;
border-style:solid;
border-width:5px;
border-color:#98bf21;
width:200px;
height:363px;
}
#Head{
position: relative;
left:30px;
}
#Body{
position: relative;
left:18px;
top:-5px;
}
#Left_Hand{
position: relative;
left:12px;
top:-125px;
}
#Right_Leg{
position: relative;
left:60px;
top:-100px;
}
#Right_Hand{
position: relative;
left:97px;
top:-393px;
}
#Left_Leg{
position: relative;
left:5px;
top:-375px;
}
.axis
{
position: absolute;
height: 7.5px;
width: 7.5px;
-webkit-border-radius: 3px;
margin: 0 ;
background-color: white;
z-index:100;
/*left:40px;
top:40px;*/
left:0px;
top:0px;
}
@-webkit-keyframes move_Head{
0%{-webkit-transform: translate(0px,0px) rotate(5deg) skew(0deg, 0deg) scale(1, 1);}
25%{-webkit-transform:translate(0px,320px) rotate(-5deg) skew(0deg, 0deg)scale(1,2);}
50%{-webkit-transform:translate(150px,320px) rotate(5deg) skew(0deg, 0deg)scale(2,1);}
75%{-webkit-transform:translate(150px,0px) rotate(-5deg) skew(0deg, 0deg)scale(1,2);}
100%{-webkit-transform:translate(0px,0px) rotate(0deg) skew(0deg, 0deg)scale(2,1);}
}
@-webkit-keyframes move_Body{
0%{-webkit-transform: translate(0px,0px) rotate(0deg) skew(5deg, 0deg) scale(1, 1);}
25%{-webkit-transform:translate(0px,100px) rotate(0deg) skew(-5deg,...
JavaScript
document.getElementById('animation-03').addEventListener('webkitAnimationEnd', function () {
alert('end')
}, false);
document.getElementById('animation-03').addEventListener('animationend', function () {
alert('end')
}, false);
document.getElementById('animation-03').addEventListener('MSAnimationEnd', function () {
alert('end')
}, false);
document.getElementById('animation-03').addEventListener('OAnimationEnd', function () {
alert('end')
}, false);