Animer une page web sans JavaScript avec les transitions CSS3

Magazine
Marque
Linux Pratique
Numéro
72
Mois de parution
juillet 2012
Domaines


Résumé
La plupart du temps la modification de la valeur d'une propriété prend effet immédiatement. Aujourd'hui, le module Transitions de CSS3 ouvre de nouvelles portes : il permet en effet de modifier progressivement la valeur d'une propriété, sur une durée donnée. Ainsi, il devient possible de créer de véritables animations uniquement via la feuille de styles, sans la moindre ligne de JavaScript !

1. Définir l'élément concerné et la durée de la transition

À savoir pour commencer que les transitions ne peuvent être appliquées que sur les propriétés qui peuvent être animées ; vous en trouverez la liste à la fin du document cité en référence [1].

Une transition se définit au minimum à l'aide de deux propriétés : transition-property et transition-duration. La première permet d'indiquer la ou les propriété(s) CSS concernée(s) par la transition, la seconde introduit la durée de la transition.

La transition de l'ancienne vers la nouvelle valeur a lieu lorsqu'un événement est déclenché, soit via une pseudo-classe (:hover, :focus, :active), soit via JavaScript (qui n'est donc plus indispensable).

Grâce aux transitions, il est ainsi possible de redimensionner des éléments, de déplacer un texte, de faire apparaître des infos-bulles, etc.

Les moteurs récents implémentent aujourd'hui la spécification CSS3 ; toutefois, pour certaines versions,...

Cet article est réservé aux abonnés. Il vous reste 90% à découvrir.
à partir de 21,65€ HT/mois/lecteur pour un accès 5 lecteurs à toute la plateforme
J'en profite


Articles qui pourraient vous intéresser...

Le partage de fichiers en ligne, simple et sécurisé

Magazine
Marque
Linux Pratique
Numéro
123
Mois de parution
janvier 2021
Domaines
Résumé

À l’heure où nous rédigeons ces lignes, le recours au télétravail est fortement recommandé, ce qui nécessite de s’équiper au mieux pour pouvoir assurer la continuité de son activité dans de bonnes conditions. Dans ce contexte, il n’est pas toujours aisé de partager facilement et de manière sécurisée des données avec ses collaborateurs. Cela est également valable dans un cadre privé, où l’on souhaiterait par exemple pouvoir échanger en quelques clics les photos des dernières fêtes ou des documents sensibles avec ses proches. Gros plan sur trois services en lignes libres, décentralisés et respectueux de la vie privée qui se révèleront fort utiles dans ces situations.

Notes : commentez votre navigation sur le Web

Magazine
Marque
Linux Pratique
Numéro
121
Mois de parution
septembre 2020
Domaines
Résumé

Développée par Mozilla Firefox, Notes est une extension pour votre navigateur web qui va ajouter un panneau latéral dans ce dernier afin que vous puissiez y apporter vos annotations lors de vos explorations sur la Toile.