.tuna {

  animation: walk-cycle 1s steps(12) infinite;

  background: url(image/tigre.png) 0 0 no-repeat;

  height: 200px;

  width: 400px;

  position: absolute;

  bottom: 1px;

  left: 50%;

  margin-left: -200px;

  -webkit-animation-name: walk-cycle;

  -webkit-animation-duration: 1s;

  -webkit-animation-timing-function: steps(12);

  -webkit-animation-iteration-count: infinite;

  transform: translateZ(0); /* Turn on GPU */

  -webkit-transform: translateZ(0); /* Turn on GPU */

}

.foreground1 {

  animation: parallax_fg linear 10s infinite both;

  background:  url(image/fond.png) 0 100% repeat-x;

  z-index: 3;

  -webkit-animation-name: parallax_fg;

  -webkit-animation-timing-function: linear;

  -webkit-animation-duration: 10s;

  -webkit-animation-iteration-count: infinite;

  -webkit-animation-fill-mode: both;

}

.tuna1 {

  animation: walk-cycle 1s steps(1) infinite;

  background: url(image/tigre.png) 0 0 no-repeat;

  height: 175px;

  width: 300px;

  position: absolute;

  bottom: 1px;

  left:25%;

  margin-left: -200px;

  -webkit-animation-name: walk-cycle;

  -webkit-animation-duration: 1s;

  -webkit-animation-timing-function: steps(5);

  -webkit-animation-iteration-count: infinite;

  transform: translateZ(0); /* Turn on GPU */

  -webkit-transform: translateZ(0); /* Turn on GPU */

}

@keyframes walk-cycle { 

  0% {background-position: 0px 0px; }

  100% {background-position: 0px -2391px; }

}

@-webkit-keyframes walk-cycle { 

  0% {background-position: 0px 0px; }

  100% {background-position: 0px -2391px; }

}

.foreground,.foreground1, .midground, .background {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0; left: 0;

  translate3d(0,0,0);

  -webkit-transform: translate3d(0,0,0); /* Safari and Chrome */

}

.foreground {

  animation: parallax_fg linear 10s infinite both;

  background:  url(image/bas.png) 0 100% repeat-x;

  z-index: 3;

  -webkit-animation-name: parallax_fg;

  -webkit-animation-timing-function: linear;

  -webkit-animation-duration: 10s;

  -webkit-animation-iteration-count: infinite;

  -webkit-animation-fill-mode: both;

}

@keyframes parallax_fg { 

  0% { background-position: -3584px 100%;}

  100% {background-position: 0% 100%; }

}

@-webkit-keyframes parallax_fg { 

  0% { background-position: -3584px 100%;}

  100% {background-position: 0% 100%; }

}

.midground {

  animation: parallax_mg linear 20s infinite;

  -webkit-animation-name: parallax_mg;

  -webkit-animation-timing-function: linear;

  -webkit-animation-duration: 20s;

  -webkit-animation-duration infinite;

  background:   0 100% repeat-x;

  z-index: 2;

}

@keyframes parallax_mg { 

  0% { background-position: -3000px 100%;}

  100% {background-position: 0% 100%; }

}

@-webkit-keyframes parallax_mg { 

  0% { background-position: -3000px 100%;}

  100% {background-position: 0% 100%; }

}

.background {

  background-image:

    url(image/bas.png);

  background-repeat: repeat-x;

  background-position: 0 100%;

  z-index: 1;

  animation: parallax_bg linear 40s infinite;

  -webkit-animation-name: parallax_bg;

  -webkit-animation-timing-function: linear;

  -webkit-animation-duration: 40s;

  -webkit-animation-iteration-count: infinite;

}

@keyframes parallax_bg { 

  0% { background-position: -2400px 100%, -2000px 100%, -1800px 100%, -1600px 100%, -1200px 100%;}

  100% {background-position: 0 100%, 0 100%, 0 100%, 0 100%, 0 100%; }

}

@-webkit-keyframes parallax_bg { 

  0% { background-position: -2400px 100%, -2000px 100%, -1800px 100%, -1600px 100%, -1200px 100%;}

  100% {background-position: 0 100%, 0 100%, 0 100%, 0 100%, 0 100%; }

}

body {

    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),

    #d2d2d2 ;

}