Animer une page web sans JavaScript avec les transitions CSS3

Magazine
Marque
Linux Pratique
Numéro
72
Mois de parution
juillet 2012
Spécialité(s)


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.
S'abonner à Connect
  • Accédez à tous les contenus de Connect en illimité
  • Découvrez des listes de lecture et des contenus Premium
  • Consultez les nouveaux articles en avant-première
Je m'abonne


Article rédigé par

Par le(s) même(s) auteur(s)

OpenStreetMap, la carte dont vous êtes le héros !

Magazine
Marque
Linux Pratique
Numéro
86
Mois de parution
novembre 2014
Spécialité(s)
Résumé
Le projet a fêté ses 10 ans d'existence au mois d'août. C'est LE projet de référence en matière de données géographiques libres. D'ailleurs, il fait partie des « producteurs de données » sur data.gouv.fr depuis presque un an déjà. Retour sur un projet d'envergure mondiale, auquel vous aussi vous pouvez contribuer !

Sécurisez vos échanges grâce à GnuPG !

Magazine
Marque
Linux Pratique
Numéro
86
Mois de parution
novembre 2014
Spécialité(s)
Résumé
GnuPG (ou GPG) est une implémentation libre du standard OpenPGP, un format développé par l'Internet Engineering Task Force (IETF), initialement conçu pour le chiffrement et l'authentification des courriers électroniques. Quelques commandes à connaître, et vous pouvez être certain que vos e-mails ne pourront être lus par une personne autre que leurs destinataires.

Les derniers articles Premiums

Les derniers articles Premium

Générez votre serveur JEE sur-mesure avec Wildfly Glow

Magazine
Marque
Contenu Premium
Spécialité(s)
Résumé

Et, si, en une ligne de commandes, on pouvait reconstruire son serveur JEE pour qu’il soit configuré, sur mesure, pour les besoins des applications qu’il embarque ? Et si on pouvait aller encore plus loin, en distribuant l’ensemble, assemblé sous la forme d’un jar exécutable ? Et si on pouvait même déployer le tout, automatiquement, sur OpenShift ? Grâce à Wildfly Glow [1], c’est possible ! Tout du moins, pour le serveur JEE open source Wildfly [2]. Démonstration dans cet article.

Bénéficiez de statistiques de fréquentations web légères et respectueuses avec Plausible Analytics

Magazine
Marque
Contenu Premium
Spécialité(s)
Résumé

Pour être visible sur le Web, un site est indispensable, cela va de soi. Mais il est impossible d’en évaluer le succès, ni celui de ses améliorations, sans établir de statistiques de fréquentation : combien de visiteurs ? Combien de pages consultées ? Quel temps passé ? Comment savoir si le nouveau design plaît réellement ? Autant de questions auxquelles Plausible se propose de répondre.

Les listes de lecture

9 article(s) - ajoutée le 01/07/2020
Vous désirez apprendre le langage Python, mais ne savez pas trop par où commencer ? Cette liste de lecture vous permettra de faire vos premiers pas en découvrant l'écosystème de Python et en écrivant de petits scripts.
11 article(s) - ajoutée le 01/07/2020
La base de tout programme effectuant une tâche un tant soit peu complexe est un algorithme, une méthode permettant de manipuler des données pour obtenir un résultat attendu. Dans cette liste, vous pourrez découvrir quelques spécimens d'algorithmes.
10 article(s) - ajoutée le 01/07/2020
À quoi bon se targuer de posséder des pétaoctets de données si l'on est incapable d'analyser ces dernières ? Cette liste vous aidera à "faire parler" vos données.
Voir les 64 listes de lecture

Abonnez-vous maintenant

et profitez de tous les contenus en illimité

Je découvre les offres

Déjà abonné ? Connectez-vous