ICI header("Location: http://www.mytesting.fr ");
TESTS ET ASTUCES DE BLOGUEUR

ANIMATION D'ALLONGEMENT AVEC DEGRADE DE COULEURS.

par André Marini 17 Février 2015, 11:44 Images

ANIMATION D'ALLONGEMENT AVEC DEGRADE DE COULEURS.

Le dégradé de couleurs s'exprime ainsi entre 0 et 100 pour 100.

 

       0% {width: 150px; background-color:red;} 
   100% {width: 500px; background-color:pink;} } 

 

PATIENTEZ CAR C'EST LONG A DEMARRER !

 

NE FONCTIONNE PAS AVEC TOUS LES NAVIGATEURS.

 

RESULTAT

 

CODE

<style type="text/css"> 
#AnimAllonge 
{ 
   position:relative; 
   left:20px; 
   top:20px; 
   padding:0px 10px; 
   width:150px; 
   height:50px; 
   background-color:blue; 
   border:solid 2px black; 
   border-radius:25px;     
   animation-name: AnimationAllonge; -webkit-animation-name: AnimationAllonge; 
   -moz-animation-name: AnimationAllonge; -o-animation-name: AnimationAllonge; 
   animation-duration: 1s; -webkit-animation-duration: 1s; 
   -moz-animation-duration: 1s; -o-animation-duration: 1s; 
   animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; 
   -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; 
   animation-timing-function:linear; -webkit-animation-timing-function:linear; 
   -moz-animation-timing-function:linear; -o-animation-timing-function:linear; 
   animation-direction:alternate; -webkit-animation-direction:alternate; 
   -moz-animation-direction:alternate; -o-animation-direction:alternate; 
} 
@keyframes AnimationAllonge { 
   0% {width: 150px; background-color:red;} 
   100% {width: 500px; background-color:pink;} } 
@-webkit-keyframes AnimationAllonge { 
   0% {width: 150px; background-color:red;} 
   100% {width: 500px; background-color:pink;} } 
@-moz-keyframes AnimationAllonge { 
   0% {width: 150px; background-color:red;} 
   100% {width: 500px; background-color:pink;} } 
@-o-keyframes AnimationAllonge { 
   0% {width: 150px; background-color:red;} 
   100% {width: 500px; background-color:pink;} } 
</style> 
<div id="AnimAllonge"> 
   <label style="float:left; font-size:24px; line-height:50px;">Ping !</label> 
   <label style="float:right; font-size:24px; line-height:50px;">Pong !</label> 
</div>
 

Haut de page

Theme: Autofocus © 2013 - Hébergé par Overblog