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

LE MOUVEMENT ROTATIF PERPETUEL ALTERNE.

par André Marini 5 Février 2015, 08:20 Images

LE MOUVEMENT ROTATIF PERPETUEL ALTERNE.

Dans cet exemple, le mouvement du cercle est lent et marque un léger arrêt en position horizontale.

On voit tout de suite quelle partie du code définit ce mouvement.

} 
#animDivLente{ 
   animation-name:rotation; -webkit-animation-name:rotation; 
   -moz-animation-name:rotation; -o-animation-name:rotation; 
   animation-duration:6s; -webkit-animation-duration:6s; 
   -moz-animation-duration:6s; -o-animation-duration:6s; 
   animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; 
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; 

Puis, à la fin

}
</style>
<div class="divRonde" id="animDivLente">Tout doux</div>

 

CODE

<style type="text/css">.divRonde{ 
   display:inline-block; 
   margin:20px; 
   width:150px; 
   height:150px; 
   border:solid 1px black; 
   background-color:lightsteelblue; 
   border-radius:75px; 
   line-height:150px; 
   font-size:24px; 
   text-align:center; 
} 
#animDivLente{ 
   animation-name:rotation; -webkit-animation-name:rotation; 
   -moz-animation-name:rotation; -o-animation-name:rotation; 
   animation-duration:6s; -webkit-animation-duration:6s; 
   -moz-animation-duration:6s; -o-animation-duration:6s; 
   animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; 
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; 
} 
@keyframes rotation{ 
   from {transform:rotate(0deg);} to {transform:rotate(360deg);} 
} 
@-webkit-keyframes rotation{ 
   from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);} 
} 
@-moz-keyframes rotation{ 
   from {-moz-transform:rotate(0deg);} to {-moz-transform:rotate(360deg);} 
} 
@-o-keyframes rotation{ 
   from {-o-transform:rotate(0deg);} to {-o-transform:rotate(360deg);} 
}
</style>
<div class="divRonde" id="animDivLente">Tout doux</div>

 

RESULTAT
 

Tout doux

Dans cet exemple, au contraire, le mouvement est rapide, défini par le temps de rotation: 2 secondes.

 

CODE

<style type="text/css">.divRonde{ 
   display:inline-block; 
   margin:20px; 
   width:150px; 
   height:150px; 
   border:solid 1px black; 
   background-color:lightsteelblue; 
   border-radius:75px; 
   line-height:150px; 
   font-size:24px; 
   text-align:center; 
} 
#animDivRapide{ 
   animation-name:rotation; -webkit-animation-name:rotation; 
   -moz-animation-name:rotation; -o-animation-name:rotation; 
   animation-duration:2s; -webkit-animation-duration:2s; 
   -moz-animation-duration:2s; -o-animation-duration:2s; 
   animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; 
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; 
} 
@keyframes rotation{ 
   from {transform:rotate(0deg);} to {transform:rotate(360deg);} 
} 
@-webkit-keyframes rotation{ 
   from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);} 
} 
@-moz-keyframes rotation{ 
   from {-moz-transform:rotate(0deg);} to {-moz-transform:rotate(360deg);} 
} 
@-o-keyframes rotation{ 
   from {-o-transform:rotate(0deg);} to {-o-transform:rotate(360deg);} 
}
</style>
<div class="divRonde" id="animDivRapide">Plus vite !</div>

 

RESULTAT
 

Plus vite !

commentaires

Haut de page

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