Les animations d'images clés CSS ouvrent une vaste gamme de possibilités pour ce qui peut être accompli avec CSS. Bien plus que de simples transitions en une étape, les images clés peuvent être utilisées pour réaliser des animations complexes à plusieurs étapes et qui sont assez impressionnantes.
Dans le projet d’aujourd’hui, nous allons commencer à partir de zéro et créer une pile de deux photos qui s’étalent et qui échangent leur ordre d’empilement lorsque vous les survolez. En cours de route, nous apprendrons à utiliser les images clés comme un pro et à jongler avec tous ces préfixes qui font tourner la tête!
Ce que nous construisons
Le concept de ce projet est assez simple. Imaginez deux photos, tournées au hasard et empilées les unes sur les autres comme si vous les aviez jetées sur un bureau. Le problème est que vous ne pouvez vraiment voir que la photo en haut!
Pour que la photo du bas reçoive l'attention qu'elle mérite, nous allons créer un événement de survol qui sépare d'abord les deux photos, puis fait glisser la photo du haut derrière la photo du bas, modifiant ainsi l'ordre d'empilement.
Les chances sont, si vous lisez ce blog, vous êtes un penseur visuel, alors voici à quoi cela ressemble en images:
Animations d'images clés et transitions
CSS propose actuellement deux options principales pour animer un élément: les transitions et les images clés. Chaque fois que vous souhaitez animer quelque chose, vous devez analyser la situation et décider quelle méthode est appropriée. Heureusement, il est très facile de choisir entre les deux.
Chaque fois que vous avez une simple animation avec une seule étape, une transition est la solution idéale. Par exemple, si vous souhaitez que quelque chose tourne légèrement lorsque vous la survolez, vous obtiendrez probablement l'effet avec une transition. Vous définissez simplement l'état d'origine, puis l'état pivoté et la transition entre les deux.
Maintenant, imaginez que vous vouliez aller plus loin dans cette idée et créer un cadran animé comme pour un coffre-fort. Vous voudriez probablement que cela tourne dans le sens des aiguilles d'une montre pendant une seconde, puis dans le sens contraire des aiguilles d'une montre, puis peut-être encore dans le sens des aiguilles d'une montre, vous avez l'idée. Pour ce scénario, vous voudrez certainement utiliser une animation par images clés.
Lequel devrions-nous utiliser?
Ci-dessus, nous avons présenté l'animation que nous souhaitons réaliser. Évidemment, ça va être assez complexe. Plusieurs articles bougeront dans les deux sens, pivoteront et échangeront leur ordre d'empilement. Étant donné cette complexité, les animations par images clés constituent le choix naturel.
Prise en charge du navigateur
Il est bon de garder à l'esprit que les images clés et les transitions bénéficient désormais d'un support assez correct sur les principaux navigateurs. sauf bien sur pour IE. Autant que je sache, ni les transitions ni les animations ne seront prises en charge avant IE10. Vous ne souhaitez donc évidemment pas les utiliser pour des fonctionnalités majeures.
Source: CanIUse.com
Étape 1. Le HTML
Assez construit, sautons dans la construction de cette ventouse. La première chose à faire est de présenter le projet en HTML. Ceci est bien sûr extrêmement facile. Tout ce dont nous avons besoin est un conteneur avec deux images.
Vérification des progrès
À ce stade, tout notre style visuel de base est terminé. Vous devriez avoir une jolie petite pile de deux photos qui ressemble à ceci:
Étape 5. Planifier l'animation
Maintenant que les photos sont configurées comme bon nous semble, nous devons planifier les détails de la façon dont nous allons les faire bouger. Puisqu'il y a deux photos, nous devrons planifier les mouvements spécifiques de chacune.
Pic One
La première image commence au bas de la pile. La plupart du mouvement se fera sur l’autre photo, mais je veux donner l’impression que celle-ci s’écarte et laisse de la place à l’autre, nous allons donc la faire légèrement pivoter.
Sans vous soucier de la syntaxe réelle, planifions chaque étape. Les images clés utilisent des pourcentages pour tracer l'animation. C'est ce que nous allons utiliser ici.
- 0%: rotation (-7deg)
- 50%: rotation (-14deg)
- 100%: rotation (-7deg)
Comme vous pouvez le constater, nous commençons par notre rotation par défaut de -7, puis passons à une rotation de -14 et nous retournons à l’origine.
Pic deux
La deuxième photo est beaucoup plus compliquée. Cette fois-ci, nous voulons déplacer la photo de quelques centaines de pixels vers la droite tout en la faisant pivoter, la permuter au bas de la pile, puis la ramener là où elle a commencé tout en restant au bas. Voici à quoi cela ressemble:
- 0%: 100px à gauche, z-index 1, rotation (7deg)
- 49%: à gauche 350px, z-index 1, rotation (20deg)
- 50%: 350px à gauche, z-index -3, rotation (20deg)
- 100%: 100px à gauche, z-index -3, rotation (7deg)
Notez que les étapes à 49% et 50% sont identiques, mis à part la valeur de z-index. Nous ne voulons pas que cette photo saute au bas de la pile tant qu'elle n'est pas à l'écart de l'autre. Nous devons donc la déplacer avant de la sauter.
Coder l'animation
Maintenant que nous avons conceptuellement planifié l'animation, il est temps de coder les versions CSS. En utilisant les progressions que nous venons de créer, cela s’avère assez facile. Rappelez-vous qu'il ne s'agit que de définir les animations, nous les implémenterons plus tard.
Préfixe Mayhem
La pire partie de l'utilisation d'animations d'images clés en CSS est le fouillis de code que vous devez utiliser pour les extraire de tous les navigateurs possibles. Le code que nous venons d'écrire est assez simple, mais nous devons maintenant le répéter avec tous les préfixes.
Il y a cependant une leçon importante à retenir ici, alors c'est une bonne pratique. La difficulté réside dans le fait que nous avons incorporé une propriété nécessitant le préfixage (transformation) à l’intérieur d’une autre (@keyframes). Cela conduit à un gros mal de tête. Et par gros, je veux dire plus de deux cents lignes de code gros.
Cela mène à un gros mal de tête. Et par gros, je veux dire plus de deux cents lignes de code gros.Pour l'extrait ci-dessus, nous devons développer toutes les rotations afin qu'elles aient les quatre préfixes principaux (webkit, moz, o et ms). Ensuite, nous devons répéter le tout en ajoutant les préfixes appropriés à la ligne @keyframe, mais dans chacun d’eux, vous n’avez besoin que de la propriété rotation standard et du préfixe qui correspond au préfixe de l’image clé parent. Encore confus? Moi aussi.
Heureusement, Prefixr est là pour sauver la situation. Prenez la syntaxe standard ci-dessus et déposez-la dans, puis tous les éléments nécessaires pour que cela fonctionne soient générés.
Vous plaisantez j'espère?
Plus de 250 lignes de code pour définir des animations simples? Qu'est-ce que je fume? Malheureusement, si nous souhaitons utiliser CSS, voici ce dont nous aurons besoin jusqu'à ce que les images clés deviennent une fonctionnalité standard, sans préfixe.
La leçon à tirer ici est d’être prudent lors de l’ajout de complexité aux animations d’images clés, car cela devient rapidement insensé. La deuxième leçon est que jQuery reste souvent la solution la plus simple pour créer des animations simples entre navigateurs!
Activer les animations
Le simple fait de définir des animations d’images-clés n’apporte rien, nous devons les implémenter avec l’animation? syntaxe. Pour ce faire, nous utilisons la syntaxe d'animation.
Nous voulons que cela se produise lorsque nous survolons le conteneur, nous utilisons donc Conteneur: vol stationnaire, puis différenciez-vous en fonction de la classe pour chacune de nos images.
Ici, nous avons appelé l'animation en utilisant les noms que nous avons définis précédemment, en définissant la longueur sur une seconde et demie, en définissant l'itération sur deux, puis en l'utilisant. alterner de sorte que la première itération parcourt les étapes dans l'ordre et que la seconde les parcourt en arrière pour aboutir à l'endroit où nous avons commencé.
Voir le travail!
Bonne nouvelle, nous avons tous terminé. Pour voir le code complet avec une démonstration en direct, cliquez sur le lien ci-dessous.
Démo: Cliquez ici pour lancer
Images clés CSS: toujours pas tout à fait là
En principe, créer des animations complexes avec CSS est étonnamment simple. La syntaxe est simple, flexible et facile à comprendre.
Malheureusement, la prise en charge du navigateur est encore insuffisante et le code nécessaire à l'implémentation peut devenir complètement fou lorsque vous commencez à intégrer d'autres propriétés CSS préfixées dans le mélange, parallèlement aux images clés.
Cela étant dit, il restait encore beaucoup à faire et si vous réussissez, vous serez sans aucun doute un vrai pro en matière de syntaxe d'image clé!