Techniques d'animation CSS3 que vous devez connaître

Traduction : Technologie d'animation CSS3 que vous devez connaître

Traduit de : Ce que vous devez savoir sur le CSS comportemental

Merci de respecter les droits d'auteur et d'indiquer le lien vers ce site lors de la réimpression !

Préface de traduction : Cet article est traduit de Smashingmagazine, mais le contenu du texte original est un peu superficiel et pas très complet. Front-end Observation ajoute un contenu de plus en plus systématique sur la base de la traduction. S'il y a des lacunes, veuillez les corriger et les ajouter.

À mesure que le Web évolue et que les navigateurs deviennent plus capables de restituer du code plus avancé, nous sommes sur la bonne voie pour atteindre notre objectif de couvrir toutes les plates-formes et tous les navigateurs. Non seulement nous pouvons passer moins de temps à nous assurer que notre modèle de boîte semble normal dans IE6, mais cela crée également une atmosphère qui encourage l'innovation, évite les piratages et met l'accent sur les scripts frontaux.

Internet est un environnement formidable et une communauté collaborative avec une richesse de connaissances à partager. Nous voulions des coins arrondis , et nous y sommes parvenus ; nous voulions plusieurs images d'arrière-plan , et nous y sommes parvenus, nous voulions des images de bordure , et nous y sommes parvenus ; La demande n’est donc jamais un problème, sinon nous pourrions toujours utiliser des tableaux pour mettre en page les pages et utiliser trop de code. Nous savons tous qu'Internet peut tout faire.

Né pour Internet

Les propriétés CSS 3 telles que border-radius, box-shadow et text-shadow commencent à prendre de l'ampleur dans les navigateurs avancés tels que webkit (Safari, Chrome, etc.) et Gecko (Firefox). Elles (ces propriétés CSS) créent déjà des pages plus légères et des expériences plus riches pour les utilisateurs, et elles se dégradent gracieusement. Cependant, ce ne sont là que quelques-unes des nombreuses choses que CSS 3 peut faire pour nous.

Dans cet article, nous irons plus loin et examinerons des techniques CSS3 plus avancées telles que les transformations, les transitions et les animations. Nous aborderons le code lui-même, la prise en charge du navigateur et quelques exemples qui démontrent correctement comment ces nouvelles propriétés peuvent améliorer à la fois votre conception et l'expérience utilisateur globale.

Transformation CSS

La transformation CSS est un projet du W3C. Mais cela ne m'a pas éclairé lorsque je me suis assis pour la première fois pour lire toutes ses fonctionnalités et apprendre quelques choses. Comme vous pouvez l'imaginer, ce document est rédigé en termes techniques et se concentre davantage sur les éléments et matrices graphiques déformés (c'est-à-dire le tracé). N'ayant pas touché aux matrices depuis ma première année de calcul, j'ai dû faire beaucoup de bons vieux tests de navigateur et deviner et vérifier pour ce chapitre.

Après avoir lu tous les didacticiels que j'ai pu trouver et de nombreux tests de navigateurs, j'ai trouvé des informations utiles sur les transformations CSS dont tout le monde peut bénéficier.

transformer

L'attribut transform implémente certaines des mêmes fonctionnalités qui peuvent être implémentées avec SVG. Il peut être utilisé sur des éléments en ligne et des éléments de bloc. Il nous permet de faire pivoter, redimensionner et déplacer des éléments – avec une seule ligne de code CSS.

La plus grande critique de certains designs avant-gardistes est que le texte n'est pas sélectionnable (il doit être obtenu en découpant des images). Lorsque vous maîtrisez l'utilisation de l'attribut transform pour contrôler le texte, ce n'est plus un problème, car il s'agit d'une méthode CSS pure, donc le texte dans l'élément restera facultatif. C'est un énorme avantage du CSS par rapport à l'utilisation d'images (ou d'images d'arrière-plan).

Quelques fonctionnalités de morphing amusantes et utiles :

tourner

Rotation permet de faire pivoter un objet en passant une valeur en degrés.

échelle

L'échelle est une fonction de mise à l'échelle qui peut agrandir n'importe quel élément. Il prend comme arguments des nombres positifs et négatifs ainsi que des décimales.

traduire

Traduire repositionne les éléments en fonction des coordonnées X et Y

fausser

Comme son nom l'indique, l'inclinaison consiste à incliner l'objet et le paramètre est le degré.

matrice

transform prend en charge la transformation matricielle, qui consiste à repositionner les éléments en fonction des coordonnées X et Y

Examinons de plus près chaque fonctionnalité.

Tourner

L'attribut transform a de nombreuses utilisations, dont la traduction (rotation). Translate fait pivoter un objet en fonction de l'angle et peut être utilisé pour les éléments en ligne et les éléments au niveau du bloc. Il peut obtenir des effets sympas.

Veuillez noter que dans IE8 (mode non standard), vous devez écrire "-ms-filter" au lieu de "filter".

Prise en charge du navigateur

La prise en charge de la traduction par le navigateur est étonnamment large. Dans l'extrait CSS ci-dessus, nous ajoutons simplement les préfixes -webkit- et -moz- et faisons pivoter l'élément #nav de -90 degrés.

Assez simple, non ? Le seul problème est que pour un élément de conception assez important, si IE ne le prend pas en charge, de nombreux concepteurs seront réticents à l'utiliser.

Heureusement, IE dispose d'un filtre pour cela : le filtre de rotation graphique. Il peut avoir 4 valeurs de rotation : 0, 1, 2 et 3. Vous n'obtiendrez pas le même contrôle granulaire que Webkit et Gecko, mais il sera au moins quelque peu cohérent (même avec IE6). Bien que ce filtre ne supporte que 4 valeurs, ce qui semble un peu inutile, pour IE, c'est mieux que rien.

échelle

L'échelle ne fonctionne pas comme vous le pensez : elle réduit et agrandit simplement un élément. La fonction de zoom prend à la fois des valeurs de largeur et de hauteur, qui peuvent être positives, négatives ou décimales.

Les valeurs positives agrandissent un élément, comme on peut s'y attendre, en fonction de la largeur et de la hauteur spécifiées.

Les valeurs négatives ne réduisent pas l'élément, mais le retournent (par exemple, le texte est inversé) et le redimensionnent en conséquence. Cependant, vous pouvez réduire ou réduire un élément en utilisant un nombre décimal inférieur à 1 (par exemple 0,5).

Prise en charge du navigateur

L'attribut scale n'est actuellement pris en charge que par Firefox, Safari et Chrome, et jusqu'à présent, aucune version d'IE ne le prend en charge. La mise à l'échelle d'un objet est un choix de conception assez significatif. Il peut être utilisé via une amélioration progressive : survol, ce qui peut ajouter un peu d'intérêt à votre navigation.