﻿.img_animal0{
	animation-name:animal0;
	animation-duration: 8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	-moz-animation-name:animal0;
	-moz-animation-duration: 8s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-name:animal0;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
}
@keyframes animal0 {
  0%, 33%, 86%, 100% {
	transform: scaleX(1); }
	43%,83% {
	transform: scaleX(100); }
}
@-moz-keyframes animal0 {
  0%, 33%, 86%, 100% {
	-moz-transform: scaleX(1); }
	43%,83% {
	-moz-transform: scaleX(100); }
}
@-webkit-keyframes animal0 {
  0%, 33%, 86%, 100% {
	-webkit-transform: scaleX(1); }
	43%,83% {
	-webkit-transform: scaleX(100); }
}

.img_animal1{
	animation-name:animal1;
	animation-duration: 8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	-moz-animation-name:animal1;
	-moz-animation-duration: 8s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-name:animal1;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
}
@keyframes animal1 {
  0%, 35%, 85%, 100% {
		transform: translate(-350px, 0px); }
  45%, 82% {
		transform: translate(5%,0px); }
}
@-moz-keyframes animal1 {
  0%, 35%, 85%, 100% {
		-moz-transform: translate(-350px, 0px); }
  45%, 82% {
		-moz-transform: translate(5%,0px); }
}
@-webkit-keyframes animal1 {
  0%, 35%, 85%, 100% {
		-webkit-transform: translate(-350px, 0px); }
  45%, 82% {
		-webkit-transform: translate(5%,0px); }
}

.img_animal2{
	animation-name:animal2;
	animation-duration: 8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	-moz-animation-name:animal2;
	-moz-animation-duration: 8s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-name:animal2;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
}
@keyframes animal2 {
  0%, 50%, 85%, 100% {
		transform: translate(350px, 0px); }
  60% {
		transform: translate(-5%,0px); }
  82% {
		transform: translate(-5%,0px); }
}
@-moz-keyframes animal2 {
  0%, 50%, 85%, 100% {
		-moz-transform: translate(350px, 0px); }
  60%, 82% {
		-moz-transform: translate(-5%,0px); }
}
@-webkit-keyframes animal2 {
  0%, 50%, 85%, 100% {
		-webkit-transform: translate(350px, 0px); }
  60%, 82% {
		-webkit-transform: translate(-5%,0px); }
}

.swing{
  display: inline-block;
	position:absolute;
	top:0.15em;
	left:0.2em;
  transform-origin: center center;

  animation-name: swing;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  -moz-animation-name: swing;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-name: swing;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
}

.swing:hover {
  animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

@keyframes swing {
  2% {
		transform: translate(0px, -2px) rotate(2deg); }
  4% {
		transform: translate(-1px, 2px) rotate(0deg); }
  6% {
		transform: translate(2px, -1px) rotate(-1deg); }
  8% {
		transform: translate(-2px, 0px) rotate(1deg); }
  10% {
		transform: translate(1px, 2px) rotate(0deg); }
  12% {
		transform: translate(1px, -2px) rotate(-1deg); }
  14% {
		transform: translate(-2px, 0px) rotate(1deg); }
  16% {
		transform: translate(2px, 1px) rotate(0deg); }
  18% {
		transform: translate(-1px, 2px) rotate(-2deg); }
  0%, 20%, 100% {
		transform: translate(0, 0) rotate(0); }
}

@-moz-keyframes swing {
  2% {
		-moz-transform: translate(0px, -2px) rotate(2deg); }
  4% {
		-moz-transform: translate(-1px, 2px) rotate(0deg); }
  6% {
		-moz-transform: translate(2px, -1px) rotate(-1deg); }
  8% {
		-moz-transform: translate(-2px, 0px) rotate(1deg); }
  10% {
		-moz-transform: translate(1px, 2px) rotate(0deg); }
  12% {
		-moz-transform: translate(1px, -2px) rotate(-1deg); }
  14% {
		-moz-transform: translate(-2px, 0px) rotate(1deg); }
  16% {
		-moz-transform: translate(2px, 1px) rotate(0deg); }
  18% {
		-moz-transform: translate(-1px, 2px) rotate(-2deg); }
  0%, 20%, 100% {
		-moz-transform: translate(0, 0) rotate(0); }
}

@-webkit-keyframes swing {
  2% {
		-webkit-transform: translate(0px, -2px) rotate(2deg); }
  4% {
		-webkit-transform: translate(-1px, 2px) rotate(0deg); }
  6% {
		-webkit-transform: translate(2px, -1px) rotate(-1deg); }
  8% {
		-webkit-transform: translate(-2px, 0px) rotate(1deg); }
  10% {
		-webkit-transform: translate(1px, 2px) rotate(0deg); }
  12% {
		-webkit-transform: translate(1px, -2px) rotate(-1deg); }
  14% {
		-webkit-transform: translate(-2px, 0px) rotate(1deg); }
  16% {
		-webkit-transform: translate(2px, 1px) rotate(0deg); }
  18% {
		-webkit-transform: translate(-1px, 2px) rotate(-2deg); }
  0%, 20%, 100% {
		-webkit-transform: translate(0, 0) rotate(0); }
}

