Cours IT Bases CSS 027_Animation et Transition

Animation

Les animations CSS sont des effets qui peuvent être utilisés pour changer progressivement les valeurs des propriétés des éléments. Les animations peuvent être appliquées à n’importe quelle propriété CSS, y compris la largeur, la hauteur, la couleur, l’arrière-plan, la bordure, etc.

La syntaxe de la propriété animation est la suivante :

• name : Spécifie le nom de l’animation.
• duration : Spécifie la durée de l’animation.
• timing-function : Spécifie la courbe de vitesse de l’animation.
• delay : Spécifie le délai de l’animation.
• iteration-count : Spécifie le nombre de répétitions de l’animation.
• direction : Spécifie la direction de lecture de l’animation.
• fill-mode : Spécifie le style de l’élément après la fin de l’animation ou lorsqu’elle est en pause ou arrêtée.

Exemple :

1
    @keyframes animationName{
2
    from {
3
        transform: rotate(0deg);
4
      }
5
      to {
6
        transform: rotate(360deg);
7
        }
8
    }
9
    .example1{
10
    width: 100px;
11
      height: 100px;
12
      background-color: #3498db;
13
      animation: animationName 2s linear infinite; /* Appliquer l'animation, durée 2 secondes, boucle infinie, transition linéaire */
14
  }

1
    <div class="example1"></div>

Effet :

• @keyframes rotate définit une animation de keyframes appelée rotate, allant de l’état initial (rotation de 0 degré) à l’état final (rotation de 360 degrés).
• L’élément .animated-box applique cette animation, en spécifiant le nom de l’animation, la durée, le type de boucle, etc. via la propriété animation.

Les animations CSS et les transitions CSS sont toutes deux des effets qui peuvent changer progressivement les valeurs des propriétés des éléments. Les principales différences sont :

• Les animations peuvent être jouées en boucle, tandis que les transitions ne sont jouées qu’une seule fois.
• Les animations peuvent spécifier la direction de lecture, les transitions non.
• Les animations peuvent spécifier le style de l’élément après la fin ou lors de la pause/l’arrêt, les transitions non.

Transition

Les transitions CSS sont des effets qui peuvent changer progressivement les valeurs des propriétés des éléments. Les transitions peuvent être appliquées à n’importe quelle propriété CSS, y compris la largeur, la hauteur, la couleur, l’arrière-plan, la bordure, etc. L’effet de transition peut varier selon le navigateur et l’appareil, les performances peuvent varier selon la complexité de la transition.

Exemple :

1
    .example1{
2
        width: 200px;
3
        height: 200px;
4
        background-color: #3498db;
5
        transition: background-color 0.5s ease; /* Définir la propriété et le temps de transition */
6
        }
7
    .example1:hover{
8
        background-color: #e74c3c;
9
        }

1
    <div class="example1"></div>

Effet :