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 :

résultat attendu
Résultat attendu © Eni

CSS / HTML5