:
L’objectif du programme est d'écrire un fichier css
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
|
. 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 ; } |