Créer des effets époustouflants avec des retards de transition CSS

Je suis un grand fan des transitions CSS. Bien sûr, ils peuvent être maltraités, mais dans l’ensemble, ils constituent un moyen simple et génial d’ajouter un peu de vie à vos pages Web. Et avouons-le, ils sont vraiment amusants à jouer.

J'ai couvert les transitions d'un million de manières différentes, mais il y a une caractéristique que je touche rarement: les retards de transition. Pourquoi voudriez-vous retarder votre transition? Il s'avère que les effets que vous pouvez obtenir deviennent beaucoup plus complexes et impressionnants lorsque vous intégrez ce paramètre supplémentaire. Ouvrons et construisons des démos sympas pour montrer comment cela fonctionne.

Ce que nous construisons

Si vous souhaitez jeter un coup d'œil à ce que nous allons construire aujourd'hui, consultez les trois démos ci-dessous:

• Message séquentiel
• Une lettre à la fois
• Effet de rideau

La syntaxe

Avant de commencer à construire quoi que ce soit, cela vaut la peine de nous actualiser sur la syntaxe de transition CSS. Il existe quatre paramètres différents associés aux transitions en CSS: propriété, durée, fonction de temporisation et délai.

Vous pouvez définir les valeurs de chacune de ces propriétés individuellement à l'aide de la syntaxe ci-dessous. Gardez à l'esprit que vous souhaiterez exécuter ce code via Prefixr pour vous assurer que vous avez couvert les différents navigateurs.

propriété de transition: opacité; durée de transition: 1s; fonction de synchronisation de transition: facilité; temps de transition: 2s;

Bien que ce soit le moyen le plus direct de déclarer une transition, c’est un moyen affreusement volumineux. Lorsque nous prenons en compte tous les différents préfixes requis, cette partie du code devient énorme:

-webkit-transition-property: opacité; -moz-transition-property: opacité; -o-transition-property: opacité; -ms-transition-property: opacité; propriété de transition: opacité; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; durée de transition: 1s; -webkit-transition-timing-function: facilité; -moz-transition-timing-function: facilité; -o-transition-timing-function: facilité; -ms-transition-timing-function: facilité; fonction de synchronisation de transition: facilité; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -o-transition-delay: 2s; -ms-transition-delay: 2s; temps de transition: 2s;

Comme vous pouvez le constater, il s’agit d’une énorme quantité de code pour une simple transition. Pour cette raison, les codeurs utilisent généralement la version abrégée beaucoup plus concise. Avec cette méthode, nous pouvons prendre l’énorme morceau de code ci-dessus et le convertir en l’extrait suivant, beaucoup plus gérable.

-webkit-transition: l'opacité 1 facilite 2s; -moz-transition: l'opacité 1s facilite 2s; -o-transition: l'opacité 1s facilite 2s; -ms-transition: l'opacité 1s facilite 2s; transition: l'opacité 1 soulage 2s;

La syntaxe abrégée

Pour être sûr que nous sommes tous sur la même page, voici une ventilation visuelle du raccourci de la transition.

Comme vous pouvez le constater, la méthode traditionnelle consiste à répertorier la propriété sur laquelle vous souhaitez activer la transition, suivie de la durée de la transition, de la fonction d'accélération et enfin du délai. Cette syntaxe n'est pas super stricte cependant. Par exemple, vous pouvez échanger la position de la fonction d'accélération et le délai et la transition continueront de fonctionner. Cependant, l'ordre indiqué ci-dessus est conforme aux spécifications officielles. Je vous recommande donc de vous y tenir.

Une chose que je fais souvent cependant est simplement de laisser la propriété de délai. La valeur par défaut est de zéro seconde. Par conséquent, si vous ne souhaitez pas de délai, vous pouvez simplement écrire ce qui suit:

transition: l'opacité s'apaise;

Le pouvoir des délais de transition

Maintenant que nous comprenons la syntaxe des transitions, parlons des raisons pour lesquelles vous voudriez un délai dans une transition. Il se peut que vous souhaitiez utiliser cette propriété pour plusieurs raisons, mais celle sur laquelle je vais me concentrer aujourd'hui consiste à réaliser des animations complexes comportant plusieurs étapes. Nous avons un peu joué avec les transitions à étapes multiples dans les articles précédents, mais aujourd'hui, nous allons vraiment nous amuser.

Fondamentalement, le concept ici est que vous déclenchez deux transitions ou plus sur un événement, mais utilisez des retards pour les faire se produire à des moments différents. Supposons donc que notre première transition soit configurée pour durer une seconde. Nous pouvons ensuite définir un délai d’une seconde pour la seconde transition afin qu’elle commence dès la fin de la première. Les résultats peuvent être assez impressionnants!

Message séquentiel

La première idée qui me vient à l’esprit pour utiliser les retards est de configurer un type de message qui se présente à l’utilisateur, morceau par morceau. Disons que nous voulons avoir trois morceaux de texte qui entrent et sortent d'une div à des moments différents. La première étape consiste à expliquer comment cela fonctionne afin que vous puissiez réfléchir à tout cela.

• Message par défaut:? Hover Here?
• Une seconde envolée de? Hover Here?
• Attendez une seconde, puis envolez-vous dans le second message: "Salutations!"
• Attendez deux secondes, puis envolez-vous dans le troisième message: «Comment vas-tu?
• Survoler retourne au message par défaut

Comme vous pouvez le constater, nous allons d’abord demander à l’utilisateur de survoler la division, puis de supprimer le message de survol lorsque deux autres messages arriveront: le premier attendra une seconde et le second, deux secondes.

HTML

Pour donner vie à cette démo, nous avons besoin d’une div qui contient trois paragraphes différents. Évidemment, si vous utilisiez ce projet en direct, vous voudriez appliquer une classe ou un ID, mais je vais garder les choses simples ici.

<p>Survolez ici</p> <p>Salutations!</p> <p>Comment vas-tu?</p>

CSS

Pour démarrer le CSS, nous allons styler la div et les paragraphes. Il y a quelques points importants à considérer ici.Tout d’abord, remarquez le positionnement relatif et le débordement caché sur la div. C’est important, assurez-vous de les inclure.

Ensuite, remarquez que j'ai absolument positionné les éléments de texte et que je les ai poussés hors du périmètre de la div pour qu'ils ne soient pas visibles par défaut. J'ai également inclus un effet fantaisie Sass 3D totalement facultatif. Pour le mix complet, consultez cet article.

div {hauteur: 300px; arrière-plan: # f3f3f3; position: relative; débordement caché; } / * Paragraphe * / p {position: absolute; à gauche: 10%; marge: 0; en haut: -200px; police: gras 70px / 1 Helvetica, sans serif; couleur: # 6d879d; @include threedeetext (# 6d879d); } petit {taille de la police: 40px; }

Il est maintenant temps de mettre en place notre premier paragraphe et de créer notre première transition. Pour ce faire, nous allons utiliser le sélecteur nth-child pour cibler le premier paragraphe (? Hover Here?). Placez-le à cinquante pixels du haut, ajoutez une transition d'une seconde sans retard et créez un effet de survol qui le zoomera hors de la vue.

/ * Survolez ici Texte * / p: nième enfant (1) {top: 50px; -webkit-transition: facilité des premiers 1; -moz-transition: facilité des 1 meilleurs; -o-transition: facilité des 1 premiers; -ms-transition: facilité des 1 premiers; transition: top 1s facilité; } div: hover p: nth-child (1) {top: -100px; }

Pour terminer cette démonstration, nous devons créer un événement de survol pour les deuxième et troisième paragraphes. Ils sont fondamentalement les mêmes, assurez-vous juste que le? Salutations? paragraphe a un délai d'une seconde et le? Comment allez-vous ?? le paragraphe a un délai de deux secondes. Veillez également à placer le dernier paragraphe plus bas.

/ * Salutations Hover * / div: hover p: nième enfant (2) {top: 50px; -webkit-transition: les 1 premiers facilitent les 1s; -moz-transition: les 1 premiers facilitent les 1s; -o-transition: les 1 premiers facilitent les 1s; -ms-transition: les 1 premiers facilitent les 1s; transition: les 1 premiers facilitent les 1; } /*Comment vas-tu? Survol * / div: survol p: nième enfant (3) {top: 110px; -webkit-transition: les 1 premiers facilitent les 2; -moz-transition: les 1 premiers facilitent les 2s; -o-transition: les 1 premiers facilitent les 2; -ms-transition: les 1 premiers facilitent les 2s; transition: les 1 premiers soulagent les 2; } / * Hover Out Transitions * / p: nième enfant (3), p: nième enfant (2) {-webkit-transition: top 0.2s facilité 0s; -moz-transition: les 0,2 premiers soulagent les 0; -o-transition: les 0,2 premiers soulagent les 0; -ms-transition: les 0,2 premiers points soulagent les 0s; transition: les 0,2 premiers soulagent les 0; }

Démo en direct

C'est tout ce qu'on peut en dire! Regardons maintenant la démonstration en direct sur Tinkerbin. Ici, vous pourrez voir et modifier le code, assurez-vous de jouer et de voir ce que vous pouvez créer!

Démo: Cliquez ici pour lancer. Notez que vous devrez changer le mode CSS en? Sass? et frapper? Run? pour voir l'effet de texte 3D.

Une lettre à la fois

Pour celui-ci, nous n'utiliserons qu'un seul message. Cependant, chaque lettre du message se mettra à voler individuellement. Le résultat sera vraiment cool et très différent de ce que vous voyez traditionnellement avec CSS.

HTML

Malheureusement, CSS ne dispose pas (encore) d'un excellent moyen de cibler des lettres individuelles dans une chaîne, aussi notre code HTML doit-il être complètement désordonné avec les étendues. C'est une douleur et le code semble un peu bâclé, mais c'est le mieux que nous puissions faire sans introduire JavaScript dans l'image, ce qui est en dehors du cadre de ce didacticiel.

<p>Bonjour</p>

CSS

Notre premier morceau de CSS va configurer notre div, tout comme la dernière fois, et styliser les lettres. J'utilise la police Google Web "Bree Serif". J'ai également défini l'opacité sur 0, la position sur absolue et transformé le texte en majuscule.

div {background: #eee; hauteur: 200px; position: relative; } span {font: 400 100px / 1 'Bree Serif', Helvetica, sans-serif; marge: 50 px; opacité: 0; text-transform: majuscule; position: absolue; }

Nous devons maintenant appliquer une transition différente à chaque lettre. Pour ce faire, utilisez nth-child comme la dernière fois et ciblez les étendues. Notez que la différence principale est que le délai est réduit à chaque fois, en commençant à 0,4 s et en descendant à 0.

span: nième enfant (5) {-webkit-transition: toutes les 0,1s facilitent les 0.4 secondes; -moz-transition: toutes les 0,1 s diminuent de 0,4 s; -o-transition: toutes les 0,1s facilitent les 0.4s; -ms-transition: toutes les 0.1s facilitent 0.4s; transition: toutes les 0.1s diminuent de 0.4s; } span: nth-child (4) {-webkit-transition: toutes les 0,1 secondes facilitent les 0,3 secondes; -moz-transition: toutes les 0,1 s facilitent les 0,3 s; -o-transition: toutes les 0,1 s atténuent les 0,3 s; -ms-transition: toutes les 0,1s facilitent les 0,3s; transition: toutes les 0,1s facilitent les 0,3s; } span: nth-child (3) {-webkit-transition: toutes les 0,1s facilitent les 0,2s; -moz-transition: toutes les 0,1 s atténuent les 0,2 s; -o-transition: toutes les 0,1 s atténuent les 0,2 s; -ms-transition: tous les 0.1s facilitent les 0.2s; transition: toutes les 0,1s facilitent les 0,2s; } span: nth-child (2) {-webkit-transition: toutes les 0,1 secondes facilitent les 0,1 secondes; -moz-transition: toutes les 0,1 s atténuent 0,1 s; -o-transition: toutes les 0,1 s atténuent les 0,1 s; -ms-transition: toutes les 0.1s facilitent 0.1s; transition: toutes les 0,1s facilitent les 0,1s; } span: nth-child (1) {-webkit-transition: toutes les 0,1s sont facilitées; -moz-transition: tous les 0.1s facilité; -o-transition: tous les 0.1s facilité; -ms-transition: tous les 0.1s facilité; transition: tous les 0,1s à l'aise; }

Pour terminer celui-ci, nous devons d’abord déclarer ce qui se passe lorsque nous survolons la div. J'ai défini les portées pour avoir une opacité de 1, les ai ramenées de la gauche et les ai pivotées à 360 degrés pour les faire tourner.

De là, il ne reste plus qu'à placer chaque lettre en vol stationnaire. Une fois cet événement terminé, un seul événement survolera toutes les lettres et deviendra visible. Nos retards garantiront que tout cela se déroulera de manière séquentielle.

div: hover span {opacité: 1; à gauche: 50px; -webkit-transform: rotation (360deg); -moz-transform: rotation (360 °); -o-transformer: faire pivoter (360 °); -ms-transform: rotation (360deg); transformer: faire pivoter (360deg); } div: hover span: nième enfant (2) {left: 120px; } div: hover span: nième enfant (3) {left: 175px; } div: hover span: nième enfant (4) {left: 230px; } div: hover span: nième enfant (5) {left: 280px; }

Démo en direct

Sur ce, nous avons tous fini. Assurez-vous de vous arrêter à la démonstration ci-dessous et de survoler la div pour voir l'animation et la modifier pour vos propres besoins.

Démo: Cliquez ici pour lancer.

Effet de rideau

A présent, vous comprenez parfaitement le fonctionnement de tout cela. Je ne vais donc pas vous expliquer plus d'explications, mais je vous ai fourni une démo supplémentaire que je trouvais amusante. Celui-ci utilise une pile d'images qui disparaissent progressivement pour révéler l'image finale au bas de la pile. C'est un effet de rideau décalé qui est certainement beaucoup plus que ce à quoi on pourrait s'attendre lors d'un survol CSS unique.

Démo: Cliquez ici pour lancer.

Comment utilisez-vous les délais de transition?

Maintenant que vous voyez certaines des idées que j'ai eues pour utiliser de manière créative les retards de transition, j'aimerais voir ce que vous avez proposé. Laissez un lien ci-dessous et montrez-moi ce que vous avez!