Créer des transitions pour vos menus

Pour rendre plus agréable les pages web, CSS3 permet d’utiliser des transitions pour l’affichage de nos objets, ou leur suppression à l’écran. L’utilisateur a ainsi une sensation de fluidité.

Effectuer une transition sur un menu

Commencez par créer un effet sur le menu grâce à la propriété CSS3 transition et ses quatre propriétés. Vous pouvez animer la couleur, la hauteur. Le mot-clé all désigne toutes les propriétés de l’élément. Je vous conseille de créer des transitions, soit sur la hauteur, la largeur ou la couleur.

Exemple :

transition: height;

Vous pouvez définir la durée de la transition, en secondes ou en millisecondes.

0,5s signifie 0,5 secondes.

timing-fonction est la fonction de transition à utiliser. Il existe ease, linear, ease-in, ease-out, et ease-in-out. Si vous êtes développeur ActionScript, vous les connaissez déjà ces fonctions de transition. Le délais, c’est le retard de départ de la transition. Il est définit soit en secondes, soit en millisecondes.

Exemple :

transition: height 0.3s;

La fonction linear signifie que la transition se fait à vitesse constante.

ease signifie que le début et la fin doivent être lentes mais qu’entre deux, il faut que ce soit rapide.

ease-in-out permet d’avoir une vitesse réduite au début et à la fin, mais plus rapides que pour ease.

Vous pouvez spécifier vous-mêmes les vitesses avec cubic-bezier(n1,n2,n3,n4) où nx représentent des nombres variant de 0 à 1.

Exemple :

transition: height 0.3s ease-in-out;

La propriété transition a ses déclinaisons sur certains navigateurs. Il peut donc être nécessaire d’utiliser ses déclinaisons, en plus de la propriété transition elle-même.

Pour Firefox, vous utiliserez également :

-moz-transition: height 0.3s ease-in-out;

Pour Chrome et Safari, l’exemple devient :

-webkit-transition: height 0.3s ease-in-out;

Enfin, pour Opera :

-o-transition: height 0.3s ease-in-out;

Conclusion

Vous obtenez ainsi des effets de menu sympas tout en sachant que dans les différents blocs, vous pouvez mettre un ou plusieurs éléments, des liens, des images…. Les transitions permettent de créer des effets sympas de transitions et d’ajouter de la fluidité sur votre site.

Voila, vous pouvez maintenant briller en soirée …

Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/tous-les-cours

Ici le parcours complet pour devenir développeur web : https://www.develop4fun.fr/parcours-developpeur-web-cours-en-ligne/

Vous pouvez également nous retrouver sur Youtube :

Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q

Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA