Les annimations et transitions en css

Synthèse pour créer votre page avec des annimations et des transitions.

Comment créer des annimations en css ?

Il faut définir l'animation grâce à la propriété @keyframes monanimation {}

Pour définir l'annimations il suffit de faire ceci :

#objet{
   width:100px;
   height:100px;
   background-color:#E80;
   animation-name:monanimation; /* défini à #objet l'annimation */
   animation-duration: 1s;
}

@keyframes monanimation{
    0%{
        width:100px;
        height:100px;
        background-color:#E80;
    }
    50%{
        width:100px;
        height:100px;
        background-color:#0A0;
        border-radius:100px;
        transform:rotate(180deg);
    }
    100%{
        width:100px;
        height:100px;
        background-color:#E80;
        transform:rotate(180deg);
    }
}
        

Et les transitions ?

Les transitions servent de rendre le changement visuel plus fluide. Dans l'onglet Transitions vous trouverez des exemples.