Transitions

C'est quoi les transitions ?

Les transitions CSS permettent de changer progressivement une propriété CSS d'un état à un autre. Elles sont utilisées pour créer des effets visuels dynamiques et fluides, rendant l'expérience utilisateur plus agréable et intuitive.

Syntaxe de Base

La propriété principale pour définir une transition est transition.

Voici les sous-propriétés associées :

• transition-property: Détermine la propriété CSS à animer (par exemple : background, opacity, color, etc.)
• transition-duration: Spécifie la durée de la transition.
• transition-timing-function: Définit la courbe de vitesse de la transition.
• transition-delay: Définit un délai avant le début de la transition.

Propriétés de Transition

transition-property

Détermine la propriété CSS à animer, par exemple : background-color, color, opacity, etc. Toutes propriétés CSS peut être utilisée dans transition-property.

Cependant, il y a une exception : display: none;. Celui-ci ne peut pas être animé, il est affiché ou non (on/off), mais on ne peut pas encore faire une transition fluide dessus.

On peut aussi utiliser la valeur all, qui animera toutes les propriétés qui changent de l'état A à l'état B.

Voici un exemple :

/* défini la box de base */
.box {
    width: 100px; 
    height: 100px;
    background-color: #79c2a1;
    color: #fff;
}

/* défini l'état lors du survol de la souris sur la box */
.box:hover {
    background-color: #1c292d;
    width: 120px;
    height: 120px;
    color: #000;
}

/* spécification sur le background uniquement */
.background-only {
    transition-property: background-color;
}

/* ajoute la transition sur toutes les propriétés */
.all {
    transition-property: all;
}

Dans cet exemple :

• La box "background" exécute la transition seulement sur le background-color et applique les changements de width, height et color sans transition, parce qu'on a spécifié : transition-property: background-color; dans notre CSS.
• La box "all" exécute une transition sur toutes les propriétés parce qu'on a spécifié : transition-property: all;.

transition-duration

La propriété transition-duration spécifie la durée de la transition. Elle détermine combien de temps (en secondes ou millisecondes) une transition met pour passer d'un état à un autre.

Voici un exemple :

/* défini la box de base */
.box {
    background-color: #79c2a1;
}

/* défini l'état lors du survol de la souris sur la box */
.box:hover {
    background-color: #1c292d;
}

/* transition courte */
.short {
    transition-duration: 0.5s;
}

/* transition longue */
.long {
    transition-duration: 5s;
}

Dans cet exemple :

• La box "0.5s" prends une demi-seconde (0.5 secondes) pour changer la couleur de fond
• La box "5s" prends 5 secondes pour changer de couleur de fond

transition-timing-function

La propriété transition-timing-function est comme la courbe d'animation. Elle définit la manière dont la transition progresse dans le temps, c'est-à-dire comment la vitesse de la transition varie du début à la fin.

Voici quelques valeurs courantes et prédéfini :

linear :

La transition a une vitesse constante.

ease :

La transition commence lentement, accélère au milieu, puis ralentit à la fin.

ease-in :

La transition commence lentement et accélère par la suite.

ease-out :

La transition commence rapidement et ralentit à la fin.
C'est l'exacte opposé de ease-in.

ease-in-out :

La transition commence et finit lentement, avec une accélération au milieu.
C'est le mix des deux précédents : le début = ease-in et la fin = ease-out.

cubic-bezier(x1, y1, x2, y2) :

On peut créer sa propre courbe d'animation grâce au cubic-bezier().

Dans cet exemple, l'animation commence de manière rapide, puis ralentit progressivement, dépasse légèrement la valeur finale avant de revenir à sa position cible. Si vous regardez la visualisation plus bas, la box utilisant cubic-bezier dépasse légèrement du cadre globale avant de revenir à sa place définie.

Visualisation :

transition-delay

La propriété transition-delay définit un temps d'attente avant le début de la transition. Elle permet de retarder le démarrage de la transition d'un certain nombre de secondes.

Exemple :

/* aucun délai */
.no-delay {
    transition-delay: 0s;
}

/* ajoute un délai de 1s avant le lancement de la transition */
.delay {
    transition-delay: 1s;
}

Dans cet exemple :

• La box "sans délai" commence la transition immédiatement.
• La box "avec délai" attend 1 seconde après la détection de l'interaction (survol de la box) avant de commencer la transition.

Conclusion

Les transitions CSS permettent de rendre les interactions utilisateur plus fluides et esthétiques. En maîtrisant les différentes propriétés de transition, vous pouvez créer des effets sophistiqués et améliorer l'expérience utilisateur sur vos sites web.

Pour aller plus loin, explorez les animations CSS et JavaScript pour des effets encore plus complexes et interactifs.

Exercices Pratiques Transition de couleur : Créez une boîte qui change de couleur lorsque l'on passe la souris dessus. Transition de taille : Faites une transition sur la largeur et la hauteur d'un élément au survol. Combinaison de propriétés : Combinez plusieurs propriétés (taille, couleur, position) pour une transition complexe au survol d'un élément. N'hésitez pas à expérimenter avec différentes valeurs et fonctions de timing pour voir comment elles affectent le comportement de la transition.

https://tympanus.net/Development/GridItemHoverEffect/