Premiers pas avec les transformations CSS3

Traduit de : Transitions CSS 101
Chinois : introduction aux transformations CSS3
Auteur original : Jason Cranford Teague
Traducteur : Shen Fei
Merci de respecter les droits d'auteur et d'indiquer la source lors de la réimpression, merci !

Bien que les gens s'attendent à des changements à l'écran, CSS et HTML ne peuvent pas faire grand-chose pour l'interaction dans la page, et ceux-ci doivent encore être implémentés dans le code.

Par exemple, un lien est soit de telle couleur, soit de telle autre couleur ; une zone de texte est soit telle ou telle grande ; une image est soit transparente, soit opaque ; elles passent directement d'un état à un autre - entre les deux. Il n'y a pas de transition .

Cela a pour conséquence que la plupart des pages Web sont quelque peu rigides, car les éléments ne font que changer ou changer de manière rigide.

Oui, vous pouvez en faire trop en utilisant DHTML, jQuery ou en écrivant votre propre JS, mais cela nécessite plus de code pour implémenter ce qui devrait être une fonctionnalité très simple.

Ce dont nous avons besoin, c'est d'un moyen rapide et simple d'ajouter des effets de transition simples à la page. Dans cet article, vous trouverez des informations utiles sur les transitions CSS et comment les utiliser.

Il y a quelques mois, j'ai suggéré aux concepteurs de commencer à utiliser les nouvelles technologies CSS 3 pour obtenir certaines fonctionnalités de base dont ils rêvaient depuis longtemps - le seul problème était qu'aucune de ces technologies n'était disponible dans IE, y compris IE8.

L’opinion selon laquelle certains lecteurs estiment que ces technologies seront invisibles pour 75 % des utilisateurs n’est pas fiable.

À ces lecteurs, je tiens à dire : "Attendez bien", car je suis sur le point de vous présenter une autre nouvelle propriété CSS qui vous permet d'ajouter des effets de transformation sympas à n'importe quel élément avec seulement quelques lignes de code.

Les transformations CSS viennent d'être introduites dans CSS 3, mais ont été ajoutées en tant qu'extension webkit. Autrement dit, ils ne peuvent désormais être utilisés que dans les navigateurs basés sur des kits Web, notamment Apple Safari et Google Chrome. Cependant, à en juger par la version pré-Alpha d'Opera 10.5, Opera prendra en charge les transformations CSS 3 dans la prochaine version 10.5. Ainsi , pour voir les effets réels mentionnés dans cet article, il est fortement recommandé d'utiliser Chrome ou Safari 4 pour consulter cet article .

Autrefois, les transformations n'étaient qu'une partie de Webkit et constituaient la base de certaines choses intéressantes que l'interface utilisateur de Safari pouvait faire et que d'autres navigateurs ne pouvaient pas faire.

Cependant, le groupe de travail CSS du W3C a refusé d'ajouter des transformations à ses fonctionnalités officielles, certains membres insistant sur le fait que les transformations ne sont pas des propriétés CSS et qu'elles seraient mieux gérées via des scripts. (Je suis plein de confiance. J'avais un point de vue similaire dans le paragraphe précédent et j'en ai discuté avec Gao Gao . Je pense que l'animation CSS dépasse le cadre de la performance. Les choses interactives devraient être implémentées avec des scripts. Mais plus tard, sous le sous la direction de frère Gui , j'ai commencé avec une nouvelle compréhension - Shen Fei)

Mais de nombreux concepteurs et développeurs, dont moi-même, insistent sur le fait qu’il s’agit bien de styles – simplement de styles dynamiques , plutôt que des styles statiques traditionnels que nous utilisons quotidiennement.

Heureusement, le débat dynamique sur le style appartient au passé. En mars dernier, des représentants d'Apple et de Mozilla ont commencé à ajouter des modules de transformation CSS aux fonctionnalités CSS 3 , très proches de ce qu'Apple avait déjà ajouté à WebKit.

Avant de continuer, permettez-moi de souligner ceci : ne faites jamais dépendre les fonctionnalités d'un site Web d'un style si le style n'est pas universel pour les navigateurs (c'est-à-dire pris en charge par tous les navigateurs couramment utilisés).

Pour ceux qui l'ont manqué, j'insiste encore une fois : ne laissez jamais la fonctionnalité d'un site Web dépendre du style, si le style n'est pas universel dans tous les navigateurs .

Cela dit, vous pouvez utiliser des styles, comme les transformations, pour améliorer la conception afin d'améliorer l'expérience utilisateur, sans sacrifier la convivialité pour les utilisateurs qui ne peuvent pas les voir. Si cela fonctionne sans transformations CSS et que les utilisateurs peuvent toujours effectuer leurs tâches, alors tout va bien et vous pouvez utiliser les transformations CSS.