Comme dans les exemples précédents, on peut remplacer le texte par une image éditée en veillant à ce qu'elle fasse 150 par 150 qui, ici est la taille du cercle.
CODE ANIMATION LENTE
<style type="text/css">.divRonde{
display:inline-block;
margin:20px;
width:150px;
height:150px;
border:solid 1px black;
background-color:white;
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"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20150205/ob_3723cb_1.jpg"></div>
RESULTAT
CODE ANIMATION RAPIDE
<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"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20150205/ob_3723cb_1.jpg" /></div>
RESULTAT
Haut de page
commentaires