Exemples d'animation CSS pour recréer

Bien utilisé, l’animation CSS est un outil incroyablement utile et puissant. Il peut ajouter de l’intérêt ou de l’excitation créative, diriger l’œil de l’utilisateur, expliquer quelque chose rapidement et succinctement et améliorer la convivialité. Pour cette raison, ces dernières années ont vu de plus en plus d’animation sur les sites et dans l’application.

Dans cet article, nous rassemblons certains des exemples d’animation CSS les plus cool que nous ayons vus et vous montrons comment les recréer., Lisez la suite pour une gamme de tutoriels approfondis et d’effets inspirants (et des liens vers leur code) à explorer.

Qu’est-ce que l’animation CSS?

L’animation CSS est une méthode d’animation de certains éléments HTML sans avoir à utiliser du JavaScript ou du Flash gourmand en processeur et en mémoire. Il n’y a pas de limite au nombre ou à la fréquence des propriétés CSS qui peuvent être modifiées. Les animations CSS sont initiées en spécifiant des images clés pour l’animation: ces images clés contiennent les styles que l’élément aura.,

Bien que cela puisse sembler limité en matière d’animation, CSS est en fait un outil très puissant et est capable de produire des animations 60fps magnifiquement lisses. « Fournir des animations réfléchies et fluides qui apportent une profondeur significative à votre site ne doit pas être difficile », explique Adam Kuhn, développeur Web frontal. « Les propriétés CSS modernes vous fournissent maintenant presque tous les outils dont vous aurez besoin pour créer des expériences mémorables pour vos utilisateurs., »

Les meilleures animations ont toujours leurs racines dans les 12 principes d’animation classiques de Disney – vous verrez plusieurs mentions de cela tout au long de ces exemples d’animation CSS, il vaut donc la peine de consulter cet article avant de commencer. Vous voudrez peut-être également explorer notre tour d’horizon de superbes vidéos musicales animées pour d’autres exemples et inspiration.

La règle d’or est que vos animations CSS ne doivent pas être exagérées – même un petit mouvement peut avoir un impact important, et trop peut être distrayant et irritant pour les utilisateurs., Voici nos exemples préférés et comment les recréer.

le Plaisir de la souris effet

Auteur: Donovan Hutchinson

C’est un effet amusant qui suit votre souris autour. Il pourrait être utile lorsque vous voulez attirer l’attention sur un élément de votre page.

Nous avons besoin de très peu de HTML pour cet effet:

<div class="demo"> <div class="perspective-container"> <div class="card"></div> </div></div>

Tout d’abord, nous positionnons la démo et définissons la perspective pour notre transformation 3D:

Ensuite, stylisez le div que nous voulons animer:

Ici, nous définissons un arrière-plan, puis nous définissons overflow sur hidden afin, Nous définissons également des variables css, sheenX et sheenY.

Ces variables de brillance aideront à positionner l’effet de brillance. Nous les utilisons dans le pseudo-élément after de notre carte:

Ici, nous nous assurons que le pseudo-élément est plus grand que le conteneur. Cela nous donnera quelque chose à glisser sur le dessus de la carte en utilisant transform.

La propriété transform utilise les variables CSS que nous avons définies précédemment. Nous allons définir ceux avec JavaScript. Configurons le JavaScript pour écouter d’abord les événements de la souris:

document.,onmousemove = handleMouseMove;

Nous avons maintenant besoin d’une fonction handleMouseMove pour gérer onmousemove:

Notre fonction prend la hauteur et la largeur de la fenêtre et crée un angle sur les axes X et Y. Nous les définissons ensuite sur le style de transformation de notre carte. Cela donne à la carte un angle basé sur la souris!

Nous appelons ensuite une fonction pour définir la position du pseudo-élément:

Notre pseudo-élément semble le mieux lorsqu’il se déplace dans la direction opposée à la souris. Pour ce faire, nous créons un nombre entre -0,5 et 0,5 qui change dans la direction opposée en calculant le rapport par -1.,

Nous multiplions ce nombre par 800 car nous voulons qu’il soit mis à l’échelle jusqu’à un maximum de 400 pixels, ce qui correspond à la distance dans laquelle nous définissons le pseudo-élément sheen en dehors de la carte.

Enfin, nous définissons ces valeurs de décalage sur nos propriétés de variables CSS, et le moteur de rendu du navigateur fait le reste.

Nous avons maintenant une carte qui tourne pour faire face à notre souris tandis que l’effet de brillance se déplace dans la direction opposée sur le dessus. Cela crée un effet agréable et accrocheur.,

The big reveal

Auteur: Adam Kuhn

Les effets de révélation de contenu animé semblent être très populaires en ce moment, et utilisés correctement, ils peuvent capturer l’attention de l’utilisateur et engager votre public. Vous avez déjà vu cela: un bloc de couleur pousse d’un côté ou de l’autre horizontalement ou verticalement, puis se retire du côté opposé, révélant cette fois un texte ou une image en dessous. C’est un concept qui peut sembler délicat mais qui ne repose vraiment que sur quelques choses.,

Tout d’abord, nous allons configurer notre positionnement d’élément (téléchargez le code complet ici) – définissez-le comme relatif (seule la statique échouera dans ce cas). Dans les cas de texte, il est préférable d’autoriser la hauteur et la largeur automatiques, bien qu’un peu de rembourrage ne fasse pas de mal. Nous allons également définir une transformation de l’origine, dans le cas de l’élément parent nous voulons utiliser la position de départ. Puisque nous voulons que l’élément soit caché initialement, nous utiliserons une transformation d’échelle le long de l’axe approprié pour le réduire.

Ensuite, un pseudo élément pour masquer notre parent, en définissant l’origine de la transformation sur l’option adverse., Enfin, enchaînez les animations, en utilisant les fonctions de synchronisation ou les retards pour compenser chacune.

Remarque, nous avons compensé les animations du parent et du pseudo-élément avec un délai indiquant à la boîte qui cache notre texte de ne le révéler qu’après que l’élément lui-même a été entièrement mis à l’échelle. Découvrez le Codepen ci-dessous.

Stagger on

Auteur: Adam Kuhn

Une fois que vous avez commencé à accumuler une bibliothèque décente de divers extraits d’assouplissement, il est temps de chercher d’autres moyens d’améliorer la profondeur de vos animations, et l’un des meilleurs moyens est de compenser vos éléments animés.,

Il est trop courant qu’un déclencheur JavaScript soit configuré pour lancer un tas d’animations basées sur la position de défilement, uniquement pour trouver tous les éléments se déplaçant efficacement en tandem. Heureusement, CSS lui-même fournit une propriété simple qui peut faire (ou casser) votre expérience animée: animation-delay.

disons, par exemple, nous avons une grille d’images que nous voulons animer dans l’image lorsque l’utilisateur fait défiler. Il y a un certain nombre de façons de déclencher cela, très probablement en ajoutant des classes aux éléments lorsqu’ils entrent dans la fenêtre., Cela peut cependant être assez lourd pour le navigateur et peut être évité en ajoutant simplement une seule classe à un élément conteneur et en définissant des retards d’animation sur les éléments enfants.

C’est un cas d’utilisation particulièrement bon pour les préprocesseurs comme SCSS ou MOINS, qui nous permettent d’utiliser une boucle @for pour itérer à travers chaque élément.

#parent{.child{ animation: animationName 1.5s ease-in-out 1 forwards;@for $i from 1 through 20{ &:nth-of-type(#{$i}){animation-delay:#{$i/10}s; }} }}

Ici, vous verrez avec SCSS que nous pouvons parcourir chaque sélecteur :nth-of-type, puis appliquer un délai d’animation basé sur la valeur numérique de chaque élément enfant., Dans ce cas, vous noterez que nous divisons notre temps pour réduire chaque incrément à une fraction de seconde. Alors que compenser vos éléments animés peut donner de l’émotion à votre animation, trop de retard peut la rendre disjointe. Découvrez ce CodePen ci-dessous.

Squigglevision

Auteur: Adam Kuhn

Les filtres SVG offrent un excellent moyen d’obtenir une sensation naturelle et dessinée à la main et d’échapper à certaines des contraintes de rendu à plat du CSS seul. Les animer peut encore améliorer l’effet.

exemple: Squigglevision., Ouais, ce n’est pas un terme technique connu de la plupart des animateurs, mais vous l’avez sûrement vu utilisé dans les dessins animés. L’idée est que les bords de ces éléments animés ne sont pas seulement quelque peu dentelés et grossièrement taillés, mais ces bords rugueux varient rapidement, image par image, ce qui leur donne l’impression d’avoir été arrachés des pages d’un carnet de croquis et de leur donner vie.

Pour obtenir cet effet, nous pouvons inclure un SVG sur notre page avec plusieurs filtres et de légères variations de niveaux de turbulence pour chacun. Ensuite, nous allons configurer notre chronologie d’animation, appelant chaque filtre dans sa propre image clé., Il est important de jouer avec les durées de synchronisation car nous prévoyons que l’animation se sentira « nerveuse » mais ne veut pas qu’elle soit si lente qu’elle se sente décousue ou si rapide qu’elle se sente folle.

À cette fin, il est important de noter que CSS n’a pas la capacité de passer en douceur entre les filtres SVG car il n’y a aucun moyen d’accéder à des propriétés telles que turbulence et scale, donc ces types d’animations devraient toujours être agités.,

Lettrage tumbling

Comme on le voit sur: Jeu de l’année
Auteur: Leon brown

Le jeu de l’année de Google présente une animation CSS ludique sur la page d’accueil, avec les mots du titre qui s’entrechoquent. Voici comment il a été fait.

La première étape consiste à définir le document de la page Web avec HTML. Il se compose du conteneur de documents HTML, qui stocke une section de tête et de corps., Alors que la section head est utilisée pour charger les ressources CSS et JavaScript externes, le corps est utilisé pour stocker le contenu de la page.

Le contenu de la page se compose de trois balises de titre h1 qui montreront les différentes variations de l’effet d’animation. Bien que n’importe quel texte puisse être inséré dans ces balises, leur animation est définie par les noms de l’attribut class. Les paramètres de présentation et d’animation pour ces noms de classe seront définis dans le CSS plus tard.

Ensuite, créez un nouveau fichier appelé » code.js’., Nous voulons trouver tous les éléments de page avec la classe animate et créer une liste de tableaux représentant chaque mot du texte interne. Le délai d’animation initial est également défini dans cette étape. Le contenu de la page n’est pas disponible tant que la page n’est pas complètement chargée, ce code est donc placé dans l’écouteur d’événement de chargement de la fenêtre.

Le contenu word des éléments d’animation doit être contenu dans un élément span. Pour ce faire, le contenu HTML existant est réinitialisé à vide, puis une boucle est utilisée pour faire du mot dans la liste « mots » identifiée un élément span., De plus, un style animationDelay est appliqué-calculé par rapport au délai initial (spécifié ci-dessous) et à la position d’index du mot.

Créez un nouveau fichier appelé styles.CSS. Nous allons maintenant définir les règles de présentation qui feront partie de chaque élément word de l’animation, contrôlé par leur balise span. L’affichage en bloc, combiné à l’alignement du texte centré, fera apparaître chaque mot sur une ligne distincte alignée horizontalement au milieu de son conteneur. Le positionnement relatif sera utilisé pour animer par rapport à sa position de flux de texte.,

.animate span{display: block;position: relative;text-align: center;}

Les éléments d’animation qui ont la classe backwards et forward ont une animation spécifique qui leur est appliquée. Cette étape définit l’animation à appliquer aux éléments span dont le conteneur parent a à la fois la classe animate et la classe backwards ou forward.

Notez qu’il n’y a pas d’espace entre la référence de classe animate et backwards, ce qui signifie que l’élément parent doit avoir les deux.

L’animation mixte est définie en utilisant les mêmes paramètres utilisés pour les animations en avant et en arrière., Au lieu d’appliquer les animations à chaque enfant du parent, le sélecteur nth-child est utilisé pour appliquer les paramètres d’animation alternée. L’animation en arrière est appliquée à chaque enfant pair, tandis que l’animation en avant est appliquée à chaque enfant impair.

Les animations que nous venons de créer sont faites avec une position de départ initiale, sans réglage de position verticale ou de rotation. La position » to » est l’état final de l’animation, qui définit les éléments avec une position verticale et un état de rotation ajustés., Des paramètres de fin légèrement différents sont utilisés pour les deux animations afin d’éviter que le texte ne devienne illisible en raison du chevauchement dans les animations mixtes.

Flip book

Auteur: Adam Kuhn

Lors de l’animation avec CSS, une approche simple est parfois nécessaire. Et il existe peu de méthodes d’animation plus simples que le flip book. En utilisant steps () comme fonction de synchronisation, nous sommes capables de reproduire cet effet. Bien que cela puisse sembler saccadé et directement contredire notre mission de maintenir la fluidité, avec le bon rythme, il peut se sentir tout aussi organique.

Alors, comment ça fonctionne?, Nous définissons notre fonction animation easing avec quelques paramètres supplémentaires-dire à notre animation combien d’étapes sont nécessaires et à quel moment au cours de la première étape que nous aimerions commencer (début, fin) – en regardant un peu comme ceci, par exemple les étapes (10, début).

Dans nos images clés, nous pouvons maintenant désigner un point final à notre animation: pour cet exemple, supposons que notre animation dure 10 secondes et que nous utilisons 10 étapes. Dans ce cas, chaque étape durera une seconde, passant immédiatement à la trame d’une seconde suivante sans transition entre les deux.,

Encore une fois, cela semble aller à l’encontre de la fluidité, mais voici où les animations étagées peuvent vraiment briller. Nous pouvons itérer progressivement à travers une feuille de sprite et animer image par image comme un flip book. En définissant des images de taille égale mais en les compilant sur une seule image horizontale (ou verticale), nous pouvons définir cette image comme arrière-plan d’élément et définir une position d’arrière-plan de pixel ou de pourcentage comme point final de notre animation, permettant une seule étape pour chaque image., La feuille de sprite se déplace ensuite et remplit l’élément image par image avec une nouvelle image d’arrière-plan en fonction de sa position.

prenons un coup d’oeil à un exemple. Dans ce cas, certains ensembles de jambes animées ajoutés à certains caractères de texte. Tout d’abord, nous allons définir notre nom d’animation, la durée, le nombre de pas, la position de départ et le nombre d’itérations:

animation:runner 0.75s steps(32, end) infinite;

Encore une fois, notez que la durée est relativement rapide à moins d’une seconde complète pour 32 images totales., Ensuite, nous allons définir nos images clés:

@keyframes runner{ from{ background-position:0px 50%;} to{ background-position:-1280px 50%; }}

Notez que le positionnement vertical de l’image est cohérent partout, ce qui nous indique que les sprites sont étirés horizontalement à travers l’image, ce qui est 1280px en largeur totale. Comme nous avons défini 32 images au total pour cette image, nous pouvons en déduire que chaque image doit avoir une largeur de 40 pixels. Découvrez ce Codepen ci-dessous.

Il est important de noter qu’une grande feuille de sprite peut potentiellement être un frein grave sur les performances, alors assurez-vous de dimensionner et de compresser les images., Avec une feuille de sprite bien conçue et une durée d’animation appropriée, vous avez maintenant une animation fluide capable de transmettre des mouvements complexes.

Souffler des bulles

Vu sur: 7UP
Voir le code
Auteur: Steven Roberts

L’animation de bulles CSS qui figure sur 7UP est un bel exemple de porter un thème de marque dans la conception du site Web. L’animation se compose de quelques éléments: le ‘dessin’ SVG des bulles puis deux animations appliquées à chaque bulle.,

La première animation modifie l’opacité de la bulle et la déplace verticalement dans la zone de vue; la seconde crée l’effet de vacillement pour plus de réalisme. Les décalages sont gérés en ciblant chaque bulle et en appliquant une durée et un délai d’animation différents.

Afin de créer nos bulles, nous allons utiliser SVG. Dans notre SVG, nous créons deux couches de bulles: une pour les plus grandes bulles et une pour les plus petites bulles. À l’intérieur du SVG, nous positionnons toutes nos bulles au bas de la zone de vue.,

Pour appliquer deux animations distinctes à nos SVG, toutes deux utilisant la propriété transform, nous devons appliquer les animations à des éléments séparés. L’élément<g> en SVG peut être utilisé un peu comme un div en HTML; nous devons envelopper chacune de nos bulles (qui sont déjà dans un groupe) dans une balise de groupe.

<g> <g transform="translate(10 940)"> <circle cx="35" cy="35" r="35"/> </g></g>

CSS dispose d’un moteur d’animation puissant et d’un code très simple afin de produire des animations complexes., Nous allons commencer par déplacer les bulles vers le haut de l’écran et changer leur opacité afin de les faire disparaître au début et à la fin de l’animation.

@keyframes up { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1024px); }}

Pour créer un effet de vacillement, il suffit de déplacer (ou de traduire) la bulle vers la gauche et la droite, de la bonne quantité – trop fera paraître l’animation trop jaunissante et déconnectée, tandis que trop peu passera généralement inaperçu. L’expérimentation est la clé lorsque vous travaillez avec l’animation.,

@keyframes wobble { 33% { transform: translateX(-50px); } 66% { transform: translateX(50px); } }

pour appliquer l’animation de nos bulles, nous allons utiliser les groupes que nous avons utilisées précédemment, et l’aide de nth-of-type pour identifier chaque bulle groupe individuellement. Nous commençons par appliquer une valeur d’opacité aux bulles et à la propriété will-change afin d’utiliser l’accélération matérielle.

.bubbles-large > g { opacity: 0;will-change: transform, opacity;}.bubbles-large g:nth-of-type(1) {...}....bubbles-small g:nth-of-type(10) {...}

Nous voulons garder tous les temps d’animation et les retards à quelques secondes les uns des autres et les configurer pour qu’ils se répètent à l’infini. Enfin, nous appliquons la fonction de synchronisation ease-in-out à notre animation wobble pour la rendre un peu plus naturelle.,

Scrolling mouse

Comme on le voit sur: Baltic Training
Voir le code
Auteur: Steven Roberts

Une animation de souris à défilement subtile peut donner une direction à l’utilisateur lorsqu’il atterrit pour la première fois sur un site Web. Bien que cela puisse être accompli en utilisant des éléments et des propriétés HTML, nous allons utiliser SVG car cela convient mieux au dessin.

à l’Intérieur de notre SVG nous avons besoin d’un rectangle avec des coins arrondis et un cercle pour l’élément, nous allons animer, en utilisant SVG, on peut étendre l’icône pour toute taille dont nous avons besoin.,

Maintenant que nous avons créé notre SVG, nous devons appliquer quelques styles simples afin de contrôler la taille et la position de l’icône dans notre conteneur. Nous avons enroulé un lien autour de la souris SVG et l’avons positionné au bas de l’écran.

.scroll-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);}.mouse { max-width: 2.5rem; width: 100%; height: auto;}

Ensuite, nous allons créer notre animation. À 0 et 20% du chemin à travers notre animation, nous voulons définir l’état de notre élément au début. En le réglant à 20% du chemin, il restera immobile pendant une partie du temps lorsqu’il sera répété à l’infini.,

@keyframes scroll { 0%, 20% { transform: translateY(0) scaleY(1); }}

Nous devons ajouter le point de départ de l’opacité, puis transformer à la fois la position Y et l’échelle verticale à la marque 100%, la fin de notre animation. La dernière chose que nous devons faire est de supprimer l’opacité afin de disparaître de notre cercle.

@keyframes scroll { ... 10% { opacity: 1; } 100% { transform: translateY(36px) scaleY(2); opacity: 0.01; }}

Enfin, nous appliquons l’animation au cercle, avec la propriété ‘transform-origin’ et la propriété will-change pour permettre l’accélération matérielle. Les propriétés d’animation sont assez explicites., La fonction de synchronisation cubic-bezier est utilisée pour tirer d’abord le cercle vers l’arrière avant de le déposer au bas de la forme de notre souris; cela ajoute une sensation ludique à l’animation.,

Animation d’écriture

Comme vu sur: Jardin Huit
Afficher le code pour les chemins d’accès et de texte
Auteur: Steven Roberts

Le Jardin Huit site web utilise une commune de la technique d’animation en vertu de laquelle le texte semble être écrit. Pour obtenir l’effet, nous nous tournons vers SVG. Pour commencer, nous allons créer le SVG., Il y a deux approches ici: convertir le texte en chemins pour les animer ou utiliser du texte SVG. Les deux approches ont leurs avantages et leurs inconvénients.

Commencez par créer notre animation d’images clés. La seule fonction dont nous avons besoin pour effectuer est de changer le stroke-dashoffset. Maintenant que nous avons créé notre animation, nous devons appliquer les valeurs à partir desquelles nous voulons animer. Nous définissons le trait-dasharray, ce qui créera des lacunes dans le trait. Nous voulons définir notre trait sur une valeur suffisamment grande pour couvrir l’ensemble de l’élément, compensant enfin le tiret par la longueur du trait.,

La magie se produit lorsque nous appliquons notre animation. En animant le décalage, nous affichons le trait, créant ainsi un effet de dessin. Nous voulons que les éléments dessinent un à la fois, avec un certain chevauchement entre la fin du dessin d’un élément et le début du dessin du suivant. Pour ce faire, nous nous tournons vers Sass / SCSS et nth-of-type pour retarder chaque lettre de la moitié de la longueur de l’animation, multipliée par la position de cette lettre particulière.,

Flying birds

Vu sur: Fournier Père et Fils
Voir le code d’un seul oiseau ou de l’ensemble du troupeau
Auteur: Steven Roberts

Nous commençons par des lignes vectorielles complètement droites, dessinant chaque image de notre animation, représentant l’oiseau dans un état de vol différent. Nous manipulons ensuite les points vectoriels et arrondissons les lignes et les arêtes. Enfin, nous mettons chaque cadre dans une boîte de taille égale et les plaçons côte à côte. Exportez le fichier en SVG.

La configuration HTML est vraiment simple., Nous avons juste besoin d’envelopper chaque oiseau dans un conteneur afin d’appliquer plusieurs animations – une pour faire voler l’oiseau et l’autre pour le déplacer à travers l’écran.

<div class="bird-container"> <div class="bird"></div></div>

Nous appliquons notre bird SVG comme arrière-plan à notre bird div et choisissons la taille que nous voulons que chaque image soit. Nous utilisons la largeur pour calculer grossièrement la nouvelle position d’arrière-plan. Le SVG a 10 cellules, nous multiplions donc notre largeur par 10, puis modifions légèrement le nombre jusqu’à ce qu’il semble correct.

L’animation CSS a quelques astuces que vous ne connaissez peut-être pas., Nous pouvons utiliser la fonction animation-timing-pour afficher l’image par étapes – un peu comme feuilleter les pages d’un cahier pour faire allusion à l’animation.

Maintenant que nous avons créé notre cycle de mouches, notre oiseau bat actuellement des ailes mais ne va nulle part. Afin de la déplacer à travers l’écran, nous créons une autre animation d’image clé. Cette animation va déplacer l’oiseau à travers l’écran horizontalement tout en changeant la position verticale et l’échelle pour permettre à l’oiseau de serpenter à travers plus réaliste.

Une fois que nous avons créé nos animations, nous devons simplement les appliquer., Nous pouvons créer plusieurs copies de notre oiseau et appliquer différents temps et délais d’animation.

.bird--one { animation-duration: 1s; animation-delay: -0.5s;}.bird--two { animation-duration: 0.9s; animation-delay: -0.75s;}

Croix de mon hamburger

Comme vu sur: Meilleure Marque de l’Agence
Afficher le code de travées et SVG
Auteur: Steven Roberts

Cette animation est utilisée sur le web, en tournant trois lignes en croix ou à proximité de l’icône., Jusqu’à assez récemment, la majorité des implémentations ont été réalisées en utilisant des éléments HTML, mais en fait SVG est beaucoup plus adapté à ce type d’animation – il n’est plus nécessaire de gonfler votre code buttons avec plusieurs portées.

En raison de la nature animable et SVG et de son DOM navigable, le code pour accomplir l’animation ou la transition change très peu – la technique est la même.

Nous commençons par créer quatre éléments, que ce soit des spans à l’intérieur d’un div ou des chemins à l’intérieur d’un SVG., Si nous utilisons des spans, nous devons utiliser CSS pour les positionner à l’intérieur du div; si nous utilisons SVG, cela est déjà pris en charge. Nous voulons positionner les lignes 2 et 3 au centre – l’une au – dessus de l’autre-tout en espaçant uniformément les lignes 1 et 4 au-dessus et au-dessous, en veillant à centrer l’origine de la transformation.

Nous allons nous appuyer sur la transition de deux propriétés: l’opacité et la rotation. Tout d’abord, nous voulons effacer les lignes 1 et 4, que nous pouvons cibler en utilisant le sélecteur :nth-child.,

.menu-icon.is-active {element-type}:nth-child(1),.menu-icon.is-active {element-type}:nth-child(4) { opacity: 0; }

La seule chose qui reste à faire est de cibler les deux lignes du milieu et de les faire pivoter de 45 degrés dans des directions opposées.

Chasser les cercles

Comme vu sur: Meilleure Marque de l’Agence
Afficher le code
Auteur: Steven Roberts

L’animation de l’icône de chargement est composé de quatre cercles. Les cercles n’ont pas de remplissage, mais ont des couleurs de traits alternées.

Dans notre CSS, nous pouvons définir quelques propriétés de base à tous nos cercles, puis utiliser le sélecteur :nth-of-type pour appliquer un trait-dasharray différent à chaque cercle.,

Ensuite, nous devons créer notre animation d’images clés. Notre animation est vraiment simple: tout ce que nous devons faire est de tourner le cercle de 360 degrés. En plaçant notre transformation à la marque de 50% de l’animation, le cercle retournera également à sa position d’origine.

@keyframes preloader { 50% { transform: rotate(360deg); } }

Avec notre animation créée, il suffit maintenant de l’appliquer à nos cercles. Nous définissons le nom de l’animation, la durée, le nombre d’itérations et la fonction de synchronisation. Le « ease-in-out » donnera à l’animation une sensation plus ludique.,

Pour le moment, nous avons notre chargeur, mais tous les éléments tournent ensemble en même temps. Pour résoudre ce problème, nous appliquerons des délais. Nous allons créer nos retards en utilisant une boucle Sass for.

@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s;} }

En raison des retards, notre cercle s’anime maintenant à son tour, créant l’illusion que les cercles se poursuivent. Le seul problème avec cela est que lorsque la page se charge tout d’abord, les cercles sont statiques, puis ils commencent à se déplacer, un à la fois. Nous pouvons obtenir le même effet de décalage, mais arrêter la pause indésirable dans notre animation en définissant simplement les retards sur une valeur négative.,

animation-delay: -#{$i * 0.15}s;

Next page: More CSS animation examples to explore

Ottima

25 exemples d’animation CSS cool pour recréer