Aller au contenu

1NSI : CSS animation avec⚓︎

animation avec @keyframes puis from et to⚓︎

animation lancée automatiquement⚓︎

La propriété CSS animation est une super-propriété. On peut donc l'utiliser de deux manières :

  • Avec des propriétés CSS animation-(quelquechose) séparées en plusieurs lignes :
    • animation
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-play-state
  • ou bien avec la super-propriété animation (tout en un)

Résumé des propriétés animation avec from et to :

#boite1 {
    /* 2°) Appliquer l'animation pré-définie */
    /* Par Propriétés Séparées */
    animation: monAnimation;        /* nom de l'animation à appliquer. DOIT ÊTRE LA PREMIERE LIGNE */
    animation-duration: 3s;         /* durée de l'animation */
    animation-timing-function: ease; /* fonction de répartition temporelle de l'animation */ 
    /* Valeurs : linear; ease-in; ease-out; ease; ou perso avec 'cubic-bezier' : https://cubic-bezier.com */
    /* animation-timing-function: cubic-bezier(0,1.03,1,.53); */
    animation-delay: 0s;             /* délai AVANT QU'ELLE SOIT LANCÉE */
    animation-iteration-count: infinite; /* nombre de fois que l'animation est répétée : 1, 2, 3,.., infinite */
    animation-play-state: running;         /* état de l'animation : par défaut 'running'. Autres valeurs: paused */

    /* super Propriété animation */
    /* animation: 3s linear 0s infinite running monAnimation; */
    /* Ordre:  duration, timing-function, delay, iteration-count, play-state, name */
}

/* 1°) Définition de l'Animation */
@keyframes monAnimation {  /* nom Unique */
    from {margin-left:100%;} /* Valeurs de Propriétés Initiales */
    to {margin-left:0%;}   /* Valeurs de Propriétés Finales */

}

animation avec pseudo-classe (par ex., lancée au clic :active)⚓︎

#boite1 {
    border: 4px solid;
    width: 250px;
    height: 250px;
    font-size: 120px;
    text-align: center;
    line-height: 250px;
    background-color: red;

}

#boite1:active {
    /* super Propriété animation */
    animation: 3s linear 0s infinite running monAnimation;
    /* Ordre:  duration, timing-function, delay, iteration-count, play-state, name */
}


/* 1°) Définition de l'Animation */
@keyframes monAnimation {  /* nom Unique */
    from {margin-left:0%;} /* Valeurs de Propriétés Initiales */
    to {margin-left:100%;}   /* Valeurs de Propriétés Finales */

}

Warning

L'animation s'arrête néanmoins si vous lâchez le clic de la souris...

animation avec pourcentages⚓︎

rotateX avec pourcentages⚓︎

rotateY avec pourcentages⚓︎

rotateZ avec pourcentages⚓︎

opacity avec pourcentages⚓︎

scale avec pourcentages⚓︎

background-color avec pourcentages⚓︎

Dans cet exemple, on anime des changements de couleur d'un élément #boite1, en précisant quelles sont ses valeurs de couleurs pour un certain pourcentage d'avancement de l'animation.