Transition CSS

Les transitions CSS vous permettent de modifier les valeurs de propriété en douceur (d'une valeur à une autre), sur une durée donnée. Les transition permettent des animations simples, pour obtenir des résultats plus complexes, il faut utiliser les animations CSS

Comment paramétrer une transition
transition: propriété durée
Pour créer un effet de transition, il faut spécifier 2 choses :
  • La propriété CSS surlaquelle ajouter un effet
  • La durée de l'effet
Exemple
Survolez le carré bleu ci-dessous :


.exemple {
  width: 50px;
  height: 50px;
  background: #337AFF;
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}

.exemple:hover {
  width: 200px;
}	


Changer plusieurs propriétés
L'exemple suivant ajoute un effet de transition pour les propriétés width et height, avec une durée de 1 secondes pour la largeur et 4 secondes pour la hauteur. Survolez le carré bleu ci-dessous :



    .exemple2 {
        width: 50px;
        height: 50px;
        background: #337AFF;
        -webkit-transition: width 1s, height 4s; /* For Safari 3.1 to 6.0 */
        transition: width 1s, height 4s;
    }

    .exemple2:hover {
        width: 150px;
        height: 150px;
    }                  


Utiliser property
Il faut utiliser property pour cibler les propriétés à animer dans le cas contraire bcp de calculs sont effectués pour rien Property permet d'optimiser la vitesse d'execution du code
par exemple : transition-property: font-size;

Evitez d'utiliser transition-property: all;


Déclenchement des transitions
Les transitions sont déclenchées sur des :hover


Les courbes de transition

easy - spécifie un effet de transition avec un début lent, puis rapide, puis une fin lente (valeur par défaut)
linear - spécifie un effet de transition avec la même vitesse du début à la fin
easy-in - spécifie un effet de transition à démarrage lent
easy-out - spécifie un effet de transition avec une extrémité lente
easy-in-out - spécifie un effet de transition avec un début et une fin lents
cubic-bezier (n, n, n, n) - vous permet de définir vos propres valeurs dans une fonction cubic-bezier
La doc Vue.js
A propos

J'exerce depuis plusieurs années le métier de développeur Front-End. Dernièrement j'ai créé ...

Qui suis-je
Qui maîtrise Internet, maîtrise le monde
Jules Cesar