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 :