.tuna {
  animation: walk-cycle 1s steps(12) infinite;
  background: url(image/double.png) 0 0 no-repeat; 
  height: 200px;
  width: 800px;
  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 */
}
.tuna22 {
  animation: walk-cycle 1s steps(48) infinite;
  background: url(image/face.png) 0 0 no-repeat; 
  height: 160px;
  width: 200px;
  position: absolute;
 
  bottom: 1px;
  left: 50%;
  margin-left: -600px;
  -webkit-animation-name: walk-cycle; 
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: steps(36);
  -webkit-animation-iteration-count: infinite;
  transform: translateZ(0); /* Turn on GPU */
  -webkit-transform: translateZ(0); /* Turn on GPU */
}
.foreground12 {
  animation: parallax_fg linear 8s 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: 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
}

#tuna12 {
 
  background: url(_image/film.gif) 0 0 no-repeat; 
  height:105px;
  width: 200px;
  position: absolute;
  
  bottom: 1px;
  left:25%;
  margin-left: -200px;
  
}
.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, .foreground12,.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 */
}



@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%; } 
}


@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%; } 
}

@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 ;
}