Wolf Animation

Galnova Wolf Animation

by Keith Jeter

HTML

<div class="w_wrap">

<div class="upDown z-4">
  <div class="w_head parRot"></div>
</div>

<div class="upDown z-3">
  <div class="w_torso pulse animated infinite"></div>
</div>

<div class="upDown z-4">
  <div class="w_tail revparRot"></div>
</div>

<div class="upDown z-4">
  <div class="r_l_1 parRot1"></div>
</div>

<div class="upDown z-4">
  <div class="r_l_2 revparRot1"></div>
</div>

<div class="r_l_3 z-4"></div>

<div class="upDown z-2">
  <div class="l_l_1 parRot1"></div>
</div>

<div class="upDown z-2">
  <div class="l_l_2 revparRot1"></div>
</div>

<div class="l_l_3 z-2"></div>

<div class="upDown z-4">
  <div class="r_r_l_1 revparRot1"></div>
</div>

<div class="upDown z-4">
  <div class="r_r_l_2 parRot1"></div>
</div>
  
<div class="r_r_l_3 z-4"></div>

<div class="upDown z-2">
  <div class="r_l_l_1 revparRot1"></div>
</div>

<div class="upDown z-2">
  <div class="r_l_l_2 parRot1"></div>
</div>

<div class="r_l_l_3 z-2"></div>

</div>

<!--<div class="wolf"></div>-->

CSS

/*-- wolf animation --*/

.wolf {
	width: 749px;
	height: 665px;
	background: url(http://galnova.com/2016/wolf/wolf.png) no-repeat;
	opacity: .1;
	top: 50px;
	left: 50px;
	position: absolute;
}

.w_wrap { 
  transform: scale(0.65);
}

.w_head {
	width: 161px;
	height: 251px;
	background: url(http://galnova.com/2016/wolf/w_head.png) no-repeat;
	opacity: .1;
	top: 195px;
	left: 606px;
	z-index: 4;
}

.w_torso {
	width: 473px;
	height: 278px;
	background: url(http://galnova.com/2016/wolf/w_torso.png) no-repeat;
	opacity: .1;
	top: 250px;
	left: 175px;
}

.w_tail {
	width: 427px;
	height: 388px;
	background: url(http://galnova.com/2016/wolf/w_tail.png) no-repeat;
	opacity: .1;
	top: 42px;
	left: 40px;
}

.r_l_1 {
	width: 175px;
	height: 388px;
	background: url(http://galnova.com/2016/wolf/r_l_1.png) no-repeat;
	opacity: .1;
	top: 355px;
	left: 400px;
}

.r_l_2 {
	width: 123px;
	height: 135px;
	background: url(http://galnova.com/2016/wolf/r_l_2.png) no-repeat;
	opacity: .1;
	top: 560px;
	left: 433px;
}

.r_l_3 {
	width: 134px;
	height: 52px;
	background: url(http://galnova.com/2016/wolf/r_l_3.png) no-repeat;
	opacity: .1;
	top: 654px;
	left: 504px;
}

.l_l_1 {
	width: 96px;
	height: 147px;
	background: url(http://galnova.com/2016/wolf/l_l_1.png) no-repeat;
	opacity: .1;
	top: 435px;
	left: 506px;
}

.l_l_2 {
	width: 146px;
	height: 137px;
	background: url(http://galnova.com/2016/wolf/l_l_2.png) no-repeat;
	opacity: .1;
	top: 527px;
	left: 565px;
}

.l_l_3 {
	width: 137px;
	height: 51px;
	background: url(http://galnova.com/2016/wolf/l_l_3.png) no-repeat;
	opacity: .1;
	top: 625px;
	left: 655px;
}

.r_r_l_1 {
	width: 106px;
	height: 225px;
	background: url(http://galnova.com/2016/wolf/r_r_l_1.png) no-repeat;
	opacity: .1;
	top: 404px;
	left: 153px;
}

.r_r_l_2 {
	width: 104px;
	height: 103px;
	background: url(http://galnova.com/2016/wolf/r_r_l_2.png) no-repeat;
	opacity: .1;
	top: 514px;
	left: 94px;
}

.r_r_l_3 {
	width: 94px;
	height: 134px;
	background:...