Une animation CSS est une modification du style d'un élément que le navigateur exécute au fil du temps. Vous pouvez en créer de deux manières : la transition propriété, pour les changements d'état tels que le survol, et la animation propriété avec @keyframes, pour les séquences qui s'exécutent automatiquement. Ce guide couvre les deux. Mais le principe sous-jacent est plus simple que cela : la propriété que vous choisissez d'animer compte plus que la syntaxe utilisée pour l'écrire. La syntaxe s'apprend en un après-midi. Le fait que l'animation soit gérée par le thread de composition ou qu'elle force le navigateur à recalculer la mise en page soixante fois par seconde détermine si l'interface reste fluide sur le matériel que vos utilisateurs possèdent réellement, et c'est là que les erreurs coûtent cher.
Chez Imaginary Cloud, nous évaluons le travail d'animation en fonction de deux éléments : le timing de l'animation, c'est-à-dire la durée et le délai qui transforment un changement de style instantané en mouvement, et les composants internes, à savoir les pseudo-éléments et les éléments supplémentaires qui permettent à un composant de supporter plusieurs mouvements simultanés. Ensemble, ils vous indiquent le coût de création et de maintenance d'un effet, et ils sont abordés dans chacune des sections ci-dessous.
Il existe plusieurs façons d'intégrer du mouvement sur une page web. Insérer un GIF préconçu comme une image classique est simple, mais vous perdez la possibilité de modifier cette animation via le code. Manipuler des éléments HTML avec JavaScript fonctionne, mais cela s'exécute sur le thread principal du navigateur, ce qui peut ralentir le reste. Ou bien, vous pouvez définir plusieurs styles pour un élément en CSS et laisser le navigateur effectuer la transition entre eux au fil du temps, ce qui est plus simple à écrire et plus facile à optimiser pour le navigateur.
Rien de tout cela n'est purement décoratif. Une animation de chargement indique à l'utilisateur qu'une action est en cours, alors qu'une page blanche le laisse se demander si l'onglet a planté. Le temps d'attente est le même, mais l'expérience diffère. C'est précisément pour cette raison qu'il vaut la peine de réaliser correctement les animations plutôt que de s'en passer.
Le CSS propose deux types. La propriété transition gère les effets au survol et les autres interactions utilisateur. La propriété animation gère les mouvements continus ou, comme nous le verrons, les mouvements comportant plusieurs étapes.
Voir le Pen types of animations par Patrícia Silva (@patsilva_tese) sur CodePen.
Qu’elle soit simple ou complexe, toute animation CSS repose sur deux piliers : le timing de l’animation et les composants internes. Une animation sans durée n’en est pas une, car le changement est instantané. Quant aux composants internes, ils sont indispensables, car un seul élément suffit rarement à créer l’effet souhaité. Examinons-les tour à tour.
Pour obtenir une animation ou une transition fluide, vous devez définir des limites temporelles. Les propriétés transition et animation vous permettent de définir la durée, c’est-à-dire le temps nécessaire pour aller du début à la fin, indiquée par la première unité de temps dans la déclaration. Vient ensuite le délai, soit le temps d’attente de l’élément avant de démarrer, défini par la seconde.
/* transition: property duration timing-function delay; */
transition: all 0.5s linear 0.2s;
/* animation: name duration timing-function delay iteration-count; */
animation: rotate 1s linear 0.2s infinite;Voir le Pen animation timing par Patrícia Silva (@patsilva_tese) sur CodePen.
Le second facteur clé, et la voie vers des effets sophistiqués, réside dans les composants internes. Si vous n’avez besoin que d’un ou deux éléments supplémentaires, les sélecteurs ::before et ::after les pseudo-éléments feront l'affaire. Votre HTML reste exactement tel quel :
<ul>
<li><a href="#">home</a></li>
</ul>Et les deux éléments supplémentaires sont déclarés entièrement en CSS :
a::before { content: ""; }
a::after { content: ""; }Appliquez-leur vos styles habituels dans votre feuille de style. Il n'est pas nécessaire de les déclarer dans le HTML, car le navigateur les rattache lui-même au composant principal, laissant ainsi votre balisage intact. La seule différence réside dans la propriété content , qui accepte une chaîne de caractères. Voyez cela comme la définition du texte à l'intérieur d'un div, mais directement depuis le CSS. Voici comment a::before a été stylisé, avec une chaîne vide pour content afin de ne créer rien d'autre que ce petit coin :
a::before {
content: "";
position: absolute;
bottom: 12px;
left: 12px;
width: 12px;
height: 12px;
border: 3px solid #FCD63F;
border-width: 0 0 3px 3px;
opacity: 0;
transition: all 0.3s;
}Et l'état au survol vers lequel il effectue la transition :
a:hover::before {
opacity: 1;
bottom: -8px;
left: -8px;
}Besoin de plus de deux éléments supplémentaires ? Utilisez alors des composants HTML standards. Modifiez la structure, insérez des balises span sans style, stylisez-les, puis appliquez la transition ou l'animation. L'utilisation de plusieurs composants se justifie également lorsque vous avez différents types de mouvements simultanés, car chaque composant ne peut gérer qu'une seule animation ou transition à la fois. L'effet de chargement ci-dessous en est l'illustration parfaite : un div nommé container contenant quatre spans, où le conteneur possède une animation qui le fait grandir, tandis que chaque span en possède une autre qui le fait pivoter.
<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
</div>C'est également de là que provient votre estimation. Un effet qui ne nécessite aucun composant interne se résume à une modification de la feuille de style. Un effet qui en nécessite quatre implique une modification du balisage, ce qui signifie révision, vérification de la compatibilité entre navigateurs et un composant que quelqu'un devra comprendre dans un an.
Alors, comment mettre en œuvre une transition ? Commencez par définir un état initial et un état final pour chaque élément concerné, y compris les ::before et ::after composants. La propriété transition indique ensuite à ces composants comment se comporter entre les deux. Elle est composée de quatre autres propriétés : transition-delay et transition-duration, le duo lié au temps que nous avons abordé dans la section sur le timing des animations, ainsi que transition-property et transition-timing-function.
Voir le Pen transition property par Patrícia Silva (@patsilva_tese) sur CodePen.
Intéressons-nous aux deux derniers.
Cette propriété définit les éléments affectés. Si vous la réglez sur all , chaque propriété modifiée entre les deux styles sera prise en compte. Vous pouvez également spécifier une propriété unique, ou un ensemble de propriétés, ce qui est utile lorsque vous souhaitez que différents éléments évoluent à des vitesses distinctes. Par exemple, si vous voulez que la couleur d'arrière-plan change beaucoup plus rapidement que la couleur du texte :
transition-property: background-color, color;
transition-duration: 0.2s, 1s;La fonction de temporisation définit la vitesse de la transition. Elle propose un menu de mots-clés, ainsi que deux fonctions permettant de définir votre propre courbe :
linear, une vitesse constante tout du long ;ease-in, un démarrage lent qui s'accélère ;ease-out, un démarrage rapide qui ralentit ;ease-in-out, un mélange des deux : lent, rapide, puis lent à nouveau ;ease, une variante du précédent et la valeur par défaut de cette propriété ;steps(n), qui permet de passer d'un état à l'autre par n paliers discrets au lieu d'une interpolation fluide. C'est ainsi que sont créés les effets de feuilles de sprites et de machine à écrire ;cubic-bezier(x1, y1, x2, y2), qui permet de définir votre propre courbe d'accélération lorsque les mots-clés prédéfinis ne conviennent pas ;linear(), un ajout plus récent qui permet de simuler des effets de ressort, de rebond et d'autres courbes complexes en listant des points le long de la trajectoire. Bénéficiant désormais d'une large compatibilité entre navigateurs, il rend l'usage de JavaScript inutile pour créer un effet de rebond.Voir le Pen valeurs possibles de transition-timing-function par Patrícia Silva (@patsilva_tese) sur CodePen.
Contrairement aux transitions, la propriété animation ne nécessite aucune liste de propriétés affectées ni d'état de début ou de fin explicite. Cette liberté provient des images clés (keyframes). Les images clés définissent les différents états du composant sous un nom, que vous transmettez ensuite à la propriété animation . Pour deux états, from et to suffisent. Si vous en voulez davantage, utilisez des pourcentages, comme dans l'animation rotate de l'effet de chargement :
@keyframes rotate {
0% { transform: rotate(0deg); }
10% { transform: rotate(0deg); }
50% { transform: rotate(90deg); }
90% { transform: rotate(90deg); }
100% { transform: rotate(90deg); }
}Tout comme transition, la propriété animation est une composition d'autres propriétés. Vous disposez de animation-duration, animation-delay et animation-timing-function, qui se comportent exactement comme leurs équivalents de transition dans Animation Timing. Ensuite animation-name, où l'on indique le nom de l'image clé. Ensuite animation-iteration-count, un nombre spécifique ou infinite. Ensuite animation-play-state, qui accepte running ou paused et vous permet de figer une animation via une classe ou un script. Et enfin animation-direction et animation-fill-mode, tous deux ci-dessous.
animation-fill-mode est celle qui piège le plus souvent les gens. Elle répond à une question que l'on ne se pose que lorsqu'un problème survient : que devient l'élément en dehors de la durée d'exécution de l'animation ?
Voir le Pen animation-direction par Patrícia Silva (@patsilva_tese) sur CodePen.
Presque toutes, tant qu'elles sont exprimées en unités de valeur. Les couleurs, la hauteur et la largeur, les marges et les espacements, l'opacité, les transformations : tout fonctionne. Le style de bordure, la position, le flottement, background-image, font-family: aucun effet. La documentation MDN sur les propriétés CSS animables contient la liste complète.
Mais « animable » ne signifie pas « peu coûteux ». Lorsqu'un navigateur affiche une page, il suit une séquence d'étapes : la mise en page (Layout), qui calcule l'emplacement et la taille de chaque élément ; la peinture (Paint), qui remplit les pixels ; et la composition (Composite), qui assemble les couches peintes à l'écran. Si vous animez un élément qui déclenche une mise en page, comme width, le navigateur doit également refaire la peinture et la composition à chaque image. C'est pourquoi les propriétés qui n'affectent que l'étape de composition, comme transform et opacity, doivent être privilégiées. Le guide web.dev sur les transitions CSS de Google explique pourquoi transform est le choix le plus fluide et le plus économe en batterie.
Si vous savez qu'un élément est sur le point d'être animé, vous pouvez l'indiquer au navigateur avec la propriété will-change pour que la couche soit promue à l'avance. Utilisez-la avec parcimonie : tout promouvoir annule l'intérêt de la fonction et consomme inutilement de la mémoire.
La compatibilité des navigateurs n'est plus un frein. Les transitions et les animations font partie du Baseline ensemble de fonctionnalités largement disponibles depuis des années sur tous les moteurs de rendu majeurs. Le choix de votre propriété détermine toujours combien de ces trois étapes de rendu le navigateur doit répéter, soixante fois par seconde, quel que soit l'appareil sur lequel la page est ouverte.
Voir le Pen JjKbdeE par Patrícia Silva (@patsilva_tese) sur CodePen.
Comme nous l'avons dit, transform est l'une des propriétés les moins coûteuses à animer. « Peu coûteux » ne signifie pas « limité ». Elle offre de nombreuses possibilités :
translate(x, y), déplace un élément de x pixels horizontalement et de y pixels verticalement. Les valeurs négatives le déplacent vers la gauche ou vers le haut, les valeurs positives vers la droite ou vers le bas.rotate(y), fait pivoter un élément de y degrés. Une valeur positive pour le sens des aiguilles d'une montre, négative pour le sens inverse. Par défaut, la rotation s'effectue autour du centre de l'élément, ce que vous pouvez modifier avec la propriété transform-origin .scale(x, y), modifie la taille. Deux valeurs permettent de multiplier la largeur par x et la hauteur par y fois. Une seule valeur modifie les deux selon ce facteur tout en conservant les proportions de l'élément. Utilisez scaleX(x) et scaleY(y) pour cibler un seul axe. Une valeur supérieure à 1 agrandit l'élément, tandis qu'une valeur comprise entre 0 et 1 le réduit.skew(x, y), incline l'élément de x degrés horizontalement et de y degrés verticalement. Si vous ne fournissez qu'une seule valeur, seul l'axe X est affecté, avec y défini sur 0. Comme pour l'échelle, skewX() et skewY() ciblent chaque axe individuellement.matrix(a, b, c, d, tx, ty), qui combine la mise à l'échelle, l'inclinaison et la translation en une seule déclaration, en prenant six valeurs dans cet ordre.Tous pivotent autour du centre de l'élément, sauf si vous modifiez transform-origin. Cette propriété accepte un ou deux pourcentages, ou l'un des mots-clés top, bottom, right, left et center. Notez l'orthographe américaine pour ce dernier : c'est celle définie par la spécification CSS, et la seule forme acceptée par le navigateur.
Si vous avez fouillé dans le code des animations précédentes, vous avez peut-être remarqué que nous n'utilisons pas transform partout. Cela ne signifie pas que ces mêmes animations ne peuvent pas être réalisées uniquement avec des transformations. Nous avons donc recréé les deux effets en utilisant uniquement transform, pour le démontrer. La structure HTML reste exactement la même.
Voir le Pen animations précédentes utilisant transform par Patrícia Silva (@patsilva_tese) le CodePen.
Voici l'évolution qui redéfinit totalement ce qu'est une « animation CSS » en 2026. Une animation pilotée par le défilement lie une @keyframes séquence à la position de défilement plutôt qu'au temps qui passe. L'effet d'apparition au défilement qui nécessitait auparavant IntersectionObserver, un écouteur de défilement ou une bibliothèque comme GSAP se résume désormais à trois lignes de CSS, et s'exécute sur le thread de composition plutôt que sur le thread principal.
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.card {
animation: fade-in linear;
animation-timeline: view();
}Deux fonctions permettent de la piloter. scroll() lie l'animation à la progression globale d'un conteneur de défilement, ce qui est idéal pour une barre de progression de lecture. view() la lie à la position d'un élément spécifique dans la fenêtre d'affichage, ce qui est parfait pour un effet d'apparition. Le guide des animations pilotées par le défilement sur MDN couvre l'intégralité de l'API.
Une mise en garde honnête concernant la compatibilité. Les navigateurs basés sur Chromium l'ont intégrée sans flag depuis Chrome 115 en juillet 2023, et Safari l'a ajoutée dans sa version 26 en septembre 2025. Mi-2026, Firefox stable nécessite toujours l'activation d'un flag ; la compatibilité mondiale est donc d'environ 82 % et la fonctionnalité n'est pas encore tout à fait considérée comme Baseline. Traitez-la comme une amélioration progressive : définissez l'état final comme état par défaut, enveloppez le mouvement dans @supports (animation-timeline: scroll()), et en cas d'échec, vous obtiendrez simplement une absence d'animation plutôt qu'une page cassée. Enveloppez-le également dans prefers-reduced-motion , car les mouvements liés au défilement sont particulièrement susceptibles de provoquer une gêne chez les utilisateurs souffrant de troubles vestibulaires.
Une paire associée qui mérite d'être connue : @starting-style avec transition-behavior: allow-discrete permet enfin d'animer l'apparition et la disparition d'un élément en display: none, ce qui est indispensable pour les boîtes de dialogue, les popovers et les notifications qui nécessitaient auparavant du JavaScript.
Imaginez le thread principal du navigateur comme une route à voie unique. La mise en page, le rendu et chaque ligne de JavaScript de votre application s'y accumulent ; lorsqu'une tâche lourde occupe la voie, tout ce qui suit est bloqué. Les animations CSS, selon les propriétés modifiées, peuvent utiliser une seconde voie appelée thread de composition. Les animations sur le thread principal ralentissent en cas d'embouteillage, tandis que celles sur le thread de composition restent fluides.
La conséquence est mesurable. Un navigateur dispose d'environ 16 millisecondes pour produire chaque image à 60 images par seconde, et même moins une fois son propre temps de traitement déduit. Si ce délai est dépassé, l'image est perdue, ce que l'utilisateur perçoit comme des saccades. Limitez vos animations à transform et opacity et le travail sortira entièrement du chemin critique. Le choix des propriétés, bien plus que le choix entre CSS et JavaScript, détermine si une animation maintient sa fréquence d'images.
Ce n'est pas un concept abstrait pour nous. Lorsque notre équipe front-end a reconstruit le tableau de bord d'AppTweak avec React et TypeScript, décharger le thread principal a largement contribué à réduire le temps de chargement de 80 %. Le principe qui assure la réactivité d'un tableau de bord est le même que celui qui garantit la fluidité d'une animation.
C'est aussi un enjeu commercial, car la vitesse perçue est ce que les utilisateurs ressentent réellement. La réactivité possède désormais son propre Core Web Vital : Interaction to Next Paint (INP) a remplacé le First Input Delay comme signal de classement Google le 12 mars 2024. Il mesure la latence totale entre l'interaction d'un utilisateur et l'affichage de l'image suivante sur l'ensemble de la visite, et non plus seulement lors de la première interaction. L'annonce de Search Central de Google détaille ce changement, et MDN propose une définition simple de l'INP. Une animation qui bloque le thread principal nuit directement à ce score, contrairement à une animation gérée par le thread de composition.
JavaScript conserve toute son utilité. Utilisez-le lorsqu'une animation doit répondre à une logique en cours d'exécution, ou lorsque vous avez besoin du contrôle précis de l'API Web Animations. Pour la plupart des mouvements d'interface, le CSS est la solution la plus rapide et la plus efficace. Si vous souhaitez un avis extérieur sur les causes des pertes d'images de votre interface, c'est précisément à cela que sert un audit technique et UX .
Le mouvement n'est pas neutre. Pour les utilisateurs souffrant de troubles vestibulaires, des mouvements amples ou répétés peuvent provoquer des nausées et des vertiges. C'est précisément pour cette raison que les systèmes d'exploitation proposent un réglage de réduction des animations et que les WCAG 2.1 incluent le critère de succès « Animation issue d'interactions ». Ignorer ce paramètre constitue un défaut d'accessibilité. Si vous travaillez pour un client du secteur public ou une grande entreprise, c'est également un manquement aux normes de conformité.
Le CSS lit ce paramètre directement via la prefers-reduced-motion media query. L'approche la plus sûre consiste à conserver vos animations telles quelles et à les neutraliser pour les utilisateurs ayant demandé une réduction des mouvements :
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}L'utilisation d'une durée proche de zéro plutôt que none est intentionnelle. Elle permet à tout gestionnaire animationend de se déclencher, évitant ainsi que votre code JavaScript ne reste en attente d'un événement qui ne surviendrait jamais. Lorsque le mouvement apporte une information plutôt qu'une simple décoration — comme c'est le cas pour un indicateur de chargement — remplacez-le par une version statique ou une simple transition en fondu plutôt que de supprimer totalement le retour visuel. Pour les nouveaux projets, une approche plus propre consiste à adopter la logique inverse : définissez la version réduite par défaut, puis ajoutez les animations uniquement à l'intérieur de @media (prefers-reduced-motion: no-preference).
L'animation est estimée comme une finition, mais facturée comme de l'ingénierie. Évalué via le timing d'animation et les composants internes, le coût se répercute sur trois aspects qu'il convient d'identifier avant même de commencer le développement.
Le premier est le temps de développement, que les composants internes permettent de prédire. Une transition sur un élément existant ne nécessite que quelques lignes de code, soit moins d'une heure, révision comprise. Une séquence d'images clés nécessitant quatre composants internes est une tout autre affaire : modifications du balisage, relecture, tests multi-navigateurs et création d'un composant qui sera hérité par quelqu'un d'autre. En réalité, il faut compter une journée plutôt qu'une heure. C'est ce ratio qu'il faut garder à l'esprit lors d'une estimation.
Le second est le risque lié aux performances. Une animation sur une propriété déclenchant une mise en page (layout) n'est pas plus lente sur une machine puissante. Le problème survient sur les appareils mobiles de milieu de gamme, où le même budget de 16 millisecondes par image doit être respecté avec une puissance de traitement réduite, et où une interface saccadée est perçue par l'utilisateur comme un site lent plutôt que comme un simple problème technique. Choisir transform plutôt que width ne coûte rien en temps de développement et élimine totalement le risque. La refonte de notre tableau de bord AppTweak en est la preuve : les 80 % de performances récupérées proviennent du fait d'avoir déchargé le thread principal, et non de l'ajout de nouvelles fonctionnalités.
Le troisième est la maintenance. Chaque animation représente un état dans lequel votre interface peut se retrouver, et chacune doit survivre à la prochaine refonte. Le timing et les composants internes sont également utiles ici. Un effet construit à partir d'une règle de timing claire et d'un petit ensemble de composants nommés est facile à reprendre pour un autre développeur, et peut être modifié sans avoir à défaire tout le composant. C'est la même discipline qui donne toute sa valeur à un système de design, et la raison pour laquelle il est avantageux d'avoir un développeur UI responsable du front-end plutôt qu'une feuille de style dont personne n'est responsable.
Il existe un jugement similaire concernant les outils. Lorsque nous avons migré FlippedNormals de WordPress vers une plateforme personnalisée sur AWS, la décision n'était pas basée sur l'idée abstraite que « le sur-mesure est meilleur » ; c'était que la pile technologique existante limitait la croissance, et que la migration s'est donc rentabilisée par une marge de manœuvre accrue et une augmentation du trafic. Les choix d'animation fonctionnent de la même manière. La question n'est pas de savoir si le mouvement en vaut la peine. Il s'agit de déterminer quelles interactions justifient le travail structurel, et lesquelles sont parfaitement servies par une simple transition sur une propriété gérée par le compositeur.
Pour la plupart des interfaces, oui. Les animations CSS sur transform et opacity peuvent être déléguées au thread de composition et continuer à s'exécuter pendant que le thread principal est occupé, alors que les animations JavaScript s'exécutent sur ce même thread principal et entrent en concurrence avec toutes les autres tâches. JavaScript reste l'outil approprié lorsqu'une animation doit répondre à une logique en cours d'exécution, ou lorsque vous avez besoin du contrôle plus précis offert par l'API Web Animations.
transform et opacity, car elles ne déclenchent que l'étape de composition du pipeline de rendu. Animer width, height, margin, padding ou haut et gauche déclenche la mise en page (Layout), ce qui force le rendu (Paint) et la composition (Composite) à s'exécuter à chaque image. La référence des propriétés animables du MDN liste ce qui est disponible.
Une transition s'exécute entre deux états et nécessite un déclencheur, généralement un survol ou un changement de classe. Une animation s'exécute d'elle-même, ne nécessite aucun déclencheur et permet de définir autant d'états intermédiaires que souhaité via des pourcentages @keyframes . Utilisez une transition pour un changement d'état et une animation pour une séquence.
Dans la plupart des navigateurs, oui. Les animations basées sur le défilement utilisent animation-timeline avec scroll() ou view() pour lier une séquence d'images clés à la position de défilement, entièrement en CSS, en s'exécutant sur le thread de composition. Le support est large mais pas universel à la mi-2026 (la version stable de Firefox nécessite encore une option), donc enveloppez-le dans @supports et traitez-le comme une amélioration progressive. Consultez le guide MDN sur les animations pilotées par le défilement.
Généralement parce qu'elle anime une propriété qui déclenche une mise en page (Layout), forçant le navigateur à recalculer la géométrie à chaque image, ce qui dépasse le budget de 16 millisecondes. Vérifiez d'abord les propriétés que vous animez, puis remplacez-les par leurs équivalents transform lorsque c'est possible : translate() au lieu de top et left, scale() au lieu de width et height.
Respectez la prefers-reduced-motion: reduce media query, qui signale le paramètre de réduction des animations choisi par l'utilisateur au niveau du système d'exploitation. Réduisez les durées à presque zéro plutôt que de supprimer totalement les animations, afin que tout code à l'écoute de animationend se déclenche toujours. Et lorsque le mouvement a une signification, comme pour un indicateur de chargement, remplacez-le par un équivalent statique plutôt que de le supprimer.
Cela peut arriver. Une animation sur le thread principal entre en conflit avec la gestion des événements, ce qui nuit à l'Interaction to Next Paint, le Core Web Vital de réactivité qui a remplacé le First Input Delay en mars 2024. Maintenir les animations sur le compositeur avec transform et opacity permet de décharger le chemin critique.
Pas sur la même propriété. Chaque élément ne peut supporter qu'une seule transition ou animation par propriété, c'est précisément pourquoi les effets sophistiqués sont construits à partir de composants internes : ::before et ::after pour un ou deux éléments supplémentaires, ou des spans ou divs additionnels lorsque vous en avez besoin de plus, chacun portant son propre mouvement.
Le moins possible pour exprimer le mouvement. Le rotation l'animation de l'effet de chargement ci-dessus en utilise cinq, dont trois servent à maintenir une position plutôt qu'à effectuer une transition. Maintenir un état à 10 % et à 90 % permet de créer une pause. Ajouter des images clés qui ne modifient aucune valeur n'apporte absolument rien.
Créer des animations avec CSS, et avec transform en particulier, devrait être votre réflexe par défaut. Soignez le timing et les composants internes de vos animations, puis privilégiez les propriétés qui restent dans la couche de composition. Ce simple choix fait toute la différence entre une interface fluide à 60 images par seconde et une autre qui saccade sur le matériel de la plupart de vos utilisateurs, sans aucun coût supplémentaire lors du développement. Veillez à ne pas abuser du mouvement, respectez le paramètre « réduire les animations » et gardez à l'esprit l'essentiel : la propriété que vous animez compte bien plus que le nombre d'animations que vous créez.
Si vous évaluez les performances de votre front-end ou si vous souhaitez un avis extérieur sur les causes de ralentissements de votre interface, notre équipe de développement web et mobile sera ravie de vous aider. Vous pouvez découvrir comment nous avons abordé des projets similaires ou entamer une discussion.
Développeur web avec un amour particulier pour le front-end. Mère de chats. J'essaie de contribuer à sauver la planète pendant mon temps libre en partageant des alternatives écologiques.
Alexandra Mendes est spécialiste senior de la croissance chez Imaginary Cloud et possède plus de 3 ans d'expérience dans la rédaction de textes sur le développement de logiciels, l'IA et la transformation numérique. Après avoir suivi un cours de développement frontend, Alexandra a acquis des compétences pratiques en matière de codage et travaille désormais en étroite collaboration avec les équipes techniques. Passionnée par la façon dont les nouvelles technologies façonnent les entreprises et la société, Alexandra aime transformer des sujets complexes en contenus clairs et utiles pour les décideurs.
People who read this post, also found these interesting:
.webp)
