Développer une animation en CSS3 Une rotation et une transparence en CSS3
1. L'objectif
Nous allons créer une animation dans laquelle une image tourne sur elle-même et devient transparente.
2. La structure
Créez une boîte <div> identifiée.
<div id="image"><img src="lion.jpg" alt="" /></div>
Appliquez-lui une position absolue.
#image {
position: absolute;
left: 400px;
top: 300px;
}
3. L'animation
L'image doit devenir transparente : nous allons utiliser la propriété opacity. L'image doit tourner sur elle-même : nous allons utiliser la propriété transform.
@-webkit-keyframes tourne {
0% {
opacity: 1;
-webkit-transform: rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes tourne {
0% {
opacity: 1;
-moz-transform: rotate(0deg);
}
100% {
opacity: 0;
-moz-transform: rotate(360deg);
}
}
@keyframes tourne {
0% {
opacity: 1;
transform: rotate(0deg);
}
100% {
opacity: 0;
transform: rotate(360deg);
}
}
Dans le sélecteur de la boîte, nous appliquons cette animation :
#image {
position: absolute;
left: 400px;
top: 300px;
-webkit-animation: tourne 5s infinite;
-moz-animation: tourne 5s infinite;
animation: tourne 5s infinite;
}
4. L'affichage
Voilà le résultat attendu :