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