.wp_animals {
width: 32px;
height: 32px;
background-repeat: no-repeat;
position: absolute;
z-index: 99999;
}
.wp_animal_left {
animation: wp_anim_left 0.5s steps(3) infinite;
-webkit-animation: wp_anim_left 0.5s steps(3) infinite;
background-position: 0 -32px;
}
.wp_animal_right {
animation: wp_anim_right 0.5s steps(3) infinite;
-webkit-animation: wp_anim_right 0.5s steps(3) infinite;
background-position: 0 -64px;
}
.wp_animal_up {
animation: wp_anim_up 0.5s steps(3) infinite;
-webkit-animation: wp_anim_up 0.5s steps(3) infinite;
background-position: 0 -96px;
}
.wp_animal_down {
animation: wp_anim_down 0.5s steps(3) infinite;
-webkit-animation: wp_anim_down 0.5s steps(3) infinite;
background-position: 0 0;
}
@keyframes wp_anim_left {
form {
background-position: 0px -32px;
}
to {
background-position: -96px -32px;
}
}
@-webkit-keyframes wp_anim_left {
form {
background-position: 0px -32px;
}
to {
background-position: -96px -32px;
}
} 
@keyframes wp_anim_right {
form {
background-position: 0px -64px;
}
to {
background-position: -96px -64px;
}
}
@-webkit-keyframes wp_anim_right {
form {
background-position: 0px -64px;
}
to {
background-position: -96px -64px;
}
} 
@keyframes wp_anim_up {
form {
background-position: 0px -96px;
}
to {
background-position: -96px -96px;
}
}
@-webkit-keyframes wp_anim_up {
form {
background-position: 0px -96px;
}
to {
background-position: -96px -96px;
}
} 
@keyframes wp_anim_down {
form {
background-position: 0px -0px;
}
to {
background-position: -96px 0px;
}
}
@-webkit-keyframes wp_anim_down {
form {
background-position: 0px 0px;
}
to {
background-position: -96px 0px;
}
}div.flipping-card::after {
display: block;
content: '';
clear: both;
}
div.flipping-card-image {
float: left;
position: relative;
background: #333;
}
div.flipping-card-image img {
width: 100% !important;
height: 100% !important;
transform-style: preserve-3d;
transition: all 0.5s linear;
backface-visibility: hidden;
}
div.flipping-card-image:hover img {
transform: rotateY(180deg);
}
div.flipping-card-image h2 {
padding: 2%;
margin: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 350px;
width: 98%;
height: 98%;
opacity: 0;
transform: rotateY(180deg);
transition: all 0.5s linear;
font-size: 30px;
color: #fff;
}
div.flipping-card-image:hover h2 {
transform: rotateY(0deg);
opacity: 1;
}
div.flipping-card-image h2 span {
line-height: normal;
vertical-align:middle;
display: inline-block;
}
div.flipping-card-image h2 span ul {
text-align: left;
}
div.flipping-card-image h2 span ul li {
line-height: 26px;
}