Code pour animations :

Pour définir la séquence d'animation voulu, on aura recourt à une règle @. Cette règle s'appelle @keyframes et c'est elle qui contiendra les style de chaque cas (une sorte d'image clé pour les animations interpolées).

main {
    margin: 25px;
}

#objet{
width:100px;
height:100px;
background-color:#E80;
animation-name:monanimation;
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);
    }
}


#carre{
    width:100px;
    height:100px;
    background-color: #E80;
    animation-name: monanimationtest;
    animation-iteration-count: 2;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-direction: normal;
}

@keyframes monanimationtest{
    0%{
        width:100px;
        height:100px;
        transform:translate(0,0) rotate(0);
        background-color:#E80;
    }
    25%{
        width:100px;
        height:100px;
        transform:translate(100%,0) rotate(-90deg);
        background-color:#0A0;
    }
    50%{
        width:100px;
        height:100px;
        transform:translate(100%,100%) rotate(-180deg);
        background-color:#F0F;
    }
    75%{
        width:100px;
        height:100px;
        transform:translate(0,100%) rotate(-270deg);
        background-color:#00A;
    }
    100%{
        width:100px;
        height:100px;
        transform:translate(0,0) rotate(-360deg);
        background-color:#E80;
    }
}

On peut simplement définir from et to :

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Les propriétés d'animation

Voici les principales propriétés utilisées pour créer des animations en CSS :

• animation-name : nom de l'animation définie dans @keyframes
• animation-duration : durée de l'animation
• animation-timing-function : vitesse de l'animation (ease, linear, etc.)
• animation-delay : délai avant le démarrage de l'animation
• animation-iteration-count : nombre d'itérations de l'animation (infini, nombre)
• animation-direction : sens de l'animation (normal, reverse, alternate)

Comment créer une animation

• Définir une animation avec @keyframes
• Appliquer l'animation à un élément avec les propriétés d'animation