animation.html

 

<div style = "height:450px" >

<div class = "foreground1" >

<div class = "foreground" >

</div>

<div class = "background" >

</div>

<div class = "tunal" >

</div>

<h2 style = "text-align:center" >

<span style = "color:#0066FF;" >

<span style = "font-size:24px;" > ANIMATION AVEC CSS </span>

</span>

</h2>

<div class = "midground" >

<div class = "tuna" >

</div>

</div>

</div>

</div>

 

 

 

 

chargement des images

Télécharger les fichiers images fichiers images .

. 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 ;

}