Back

Les transitions en CSS

Les transitions en CSS

  1. Objectif

    • Etre capable de travailler avec les propriétés transition-property, transition-duration, transition-timing-function et transition-delay.
  2. Présentation

    • La transition c’est le fait de passer un objet d’un état A à un état B
    • Les transitions CSS permettent de contrôler la vitesse d’animation lorsque les propriétés CSS sont modifiées.
    • Les transitions CSS vous permettent de choisir :
      • les propriétés à animer en les listant explicitement
      • le début de l’animation
      • la durée de l’animation
      • la façon dont la transition s’exécutera



  3. Les bases des transitions CSS

    • transition-property : propriété à laquelle la transition s’applique.Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions.
    • transition-duration : durée de la transition (0,3 secondes).
    • transition-delay : courbe de vitesse de la transition, cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition..
  4. Un exemple simple

    • Créer une page HTML de contenu basique, constirué d’un simple bloc <div>
    • <!Doctype html>
      <html>
      <head>
      <meta charset ="utf-8">
      <title><transition et animation</title>
      <link href="style.css" type="text/css" rel="stylesheet"/>
      </head>
      <body>
      <div></div>
      </body>
      </html>
    • Ajouter le code css suivant:
    • div{
      width:200px;
      height:50px;
      background-color:green;
      }
      div:hover{
      background-color:blue;
      }
    • Cela nous donne un élément bleu qui devient vert au survol.
    • Ajouter maintenant une transition sur background-color
    • transition-property: background-color;
      <li>Appliquer une transition sur plusieurs propriétés

        La propriété transition se définit comme une ou plusieurs propriétés de transitions, séparées par des virgules.

      transition-property: background-color,width,height;
      transition-duration: 1s;
      transition-delay: 0.5s;

  5. Transition-timing-function

    • La propriété transition-timing-function décrit comment l’objet doit transiter d’un état à un autre.
    • Ceci permet donc de définir une courbe d’accélération, de manière à ce que la vitesse de la transition varie au cours de sa durée.
    • Les valeurs prédéfinies sont les suivantes:
      • ease: rapide au début et ralenti à la fin;
      • ease-in: lent au début et accélère petit à petit à la fin;
        ease-out: rapide au début et de plus en plus lent à la fin;
        ease-in-out: départ et fin lents;
        linear: vitesse constante;

  6. Application

    • Appliquer une transition de 2 secondes à la largeur du div et définir une fonction ease-in-out pour la transition



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement