[CSS3] Animation circulaire avec @keyframes anims

by Jean-Baptiste Audras

HTML

<div class="ilorbite">
    <div class="texte">Références</div>
</div>

CSS

body {
    background:#ccc;
}
.ilorbite {
    display:block;
    position: absolute;
    margin: 0;
    padding:0;
    width: 300px;
    height:300px;
    top:-100px;
    left: 20%;
    background: #e50083;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    -ms-border-radius: 150px;
    border-radius: 150px;
    -webkit-animation: monorbite 14s linear infinite;
    -moz-animation: monorbite 14s linear infinite;
    -o-animation: monorbite 14s linear infinite;
    animation: monorbite 14s linear infinite;
}
.texte {
    position: absolute;
    display: inline-block;
    top: 130px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 40px;
    color: #fff;
}

@-webkit-keyframes monorbite {
	from { 	-webkit-transform: rotate(0deg) translateX(5px) rotate(0deg); }
	to   {  -webkit-transform: rotate(360deg) translateX(5px) rotate(-360deg); }
}

@-moz-keyframes monorbite {
	from { 	-moz-transform: rotate(0deg) translateX(5px) rotate(0deg); }
	to   {  -moz-transform: rotate(360deg) translateX(5px) rotate(-360deg); }
}

@-o-keyframes monorbite {
	from { 	-o-transform: rotate(0deg) translateX(5px) rotate(0deg); }
	to   {  -o-transform: rotate(360deg) translateX(5px) rotate(-360deg); }
}

@keyframes monorbite {
	from { 	transform: rotate(0deg) translateX(5px) rotate(0deg); }
	to   {  transform: rotate(360deg) translateX(5px) rotate(-360deg); }
}