Qu'est-ce qu'une accélération cubic-bezier ?

C'est une fonction de temporisation pour les transitions et animations CSS définie par deux points de contrôle, écrite comme cubic-bezier(x1, y1, x2, y2), qui détermine comment une propriété évolue dans le temps.

La valeur y peut-elle dépasser 1 ou descendre sous 0 ?

Oui. Des valeurs y en dehors de 0–1 font dépasser ou reculer l'animation, créant des effets de rebond. Seules les valeurs x sont limitées à 0–1.

Quel est le lien avec ease et ease-in-out ?

Ces mots-clés sont des courbes cubic-bezier spécifiques. Utilisez les préréglages pour partir de celles-ci, puis faites glisser les poignées pour personnaliser.

Où coller le résultat ?

Utilisez la valeur cubic-bezier() comme fonction de temporisation dans une transition ou animation, par exemple transition: all 0.4s cubic-bezier(...).

Quelque chose est-il envoyé à un serveur ?

Non. L'éditeur fonctionne entièrement dans votre navigateur et rien n'est envoyé.

Générateur Cubic Bezier

Aperçu

cubic-bezier(0.25, 0.1, 0.25, 1)

transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);

Outils externes associés

Certains liens sont des liens d'affiliation.

AmazonLe plus grand marché en ligne mondial pour les achats, l'électronique, les livres, les logiciels et plus encore. La livraison rapide, les retours faciles et le vaste catalogue de produits en font le choix privilégié pour les achats quotidiens. L'abonnement Prime ajoute le streaming, la livraison gratuite et des offres exclusives.UdemyUn marché d'apprentissage en ligne avec plus de 250 000 cours en programmation, design, business et plus. Les cours sont dispensés par des experts du secteur et disponibles à votre rythme. Les ventes fréquentes en font l'un des moyens les plus abordables d'apprendre.

Outils associés

Convertisseur de CouleurConvertissez n'importe quelle couleur entre HEX, RGB, HSL, HSV et RGBA à la fois. Modifiez une valeur, copiez en un clic, avec alpha et contraste WCAG.Générateur de Palette de CouleursGénérez des palettes de couleurs harmonieuses à partir d'un HEX de base avec des schémas complémentaire, analogue, triadique et plus. Verrouillez des couleurs, régénérez le reste et exportez en CSS, Tailwind ou JSON.Générateur de DégradéCréez des dégradés CSS linéaires, radiaux et coniques avec plusieurs points de couleur. Ajustez l'angle, la forme et le centre, puis copiez le CSS background ou la valeur Tailwind en un clic.Extracteur de Couleurs d'ImageExtrayez la palette de couleurs dominantes de n'importe quelle image dans votre navigateur, sans rien envoyer. Obtenez HEX, RGB et pourcentage (%) de chaque couleur, choisissez le nombre et exportez en CSS/JSON.

Concevez une courbe d'accélération CSS personnalisée en faisant glisser deux poignées, observez le mouvement dans un aperçu en direct et copiez la valeur cubic-bezier() et le code transition prêts à l'emploi. Idéal pour affiner la sensation de vos animations. Tout fonctionne dans votre navigateur.

Comment l'utiliser

Faites glisser les deux poignées colorées, ou saisissez des valeurs exactes pour x1, y1, x2 et y2.
Appuyez sur rejouer pour prévisualiser le mouvement produit par la courbe.
Copiez la valeur cubic-bezier() ou la ligne transition complète dans votre CSS.

Fonctionnement

Une courbe d'accélération CSS est une courbe de Bézier cubique avec des extrémités fixes en (0,0) et (1,1). Deux points de contrôle donnent forme à la courbe entre elles, et leurs coordonnées sont les quatre nombres de cubic-bezier(x1, y1, x2, y2). Les valeurs x doivent rester entre 0 et 1 (le temps avance toujours), mais les valeurs y peuvent descendre en dessous de 0 ou dépasser 1 pour créer des effets d'anticipation ou de dépassement.

Fonctionnalités

Glisser pour donner forme

Déplacez les poignées directement sur la courbe pour trouver l'accélération souhaitée.

Valeurs exactes

Saisissez des coordonnées précises lorsque vous devez correspondre à une spécification ou un système de design.

Aperçu en direct

Rejouez le mouvement pour juger l'accélération avant de l'utiliser.

Préréglages standard

Partez de ease, linear, ease-in, ease-out ou ease-in-out et ajustez depuis là.

Code prêt à copier

Copiez la valeur cubic-bezier() ou une déclaration transition complète.

Quand l'utiliser

Mouvement d'interface

Ajustez comment les boutons, les modales et les panneaux bougent pour que les transitions paraissent naturelles.

Microinteractions

Ajoutez un léger dépassement ou une anticipation aux petites interactions pour leur donner de la personnalité.

Accélération cohérente

Définissez une courbe personnalisée et réutilisez-la dans tout un projet pour une sensation unifiée.

Apprentissage

Observez comment les points de contrôle modifient le mouvement pour comprendre les fonctions d'accélération.

Remarques

Les valeurs x sont limitées à 0–1 car le temps ne peut pas reculer.
Les valeurs y peuvent dépasser 0–1 pour créer des effets de rebond ou de dépassement.
Les préréglages intégrés approximent les mots-clés CSS standard.
Tout fonctionne sur votre appareil ; rien n'est envoyé.

FAQ

Qu'est-ce qu'une accélération cubic-bezier ?: C'est une fonction de temporisation pour les transitions et animations CSS définie par deux points de contrôle, écrite comme cubic-bezier(x1, y1, x2, y2), qui détermine comment une propriété évolue dans le temps.
La valeur y peut-elle dépasser 1 ou descendre sous 0 ?: Oui. Des valeurs y en dehors de 0–1 font dépasser ou reculer l'animation, créant des effets de rebond. Seules les valeurs x sont limitées à 0–1.
Quel est le lien avec ease et ease-in-out ?: Ces mots-clés sont des courbes cubic-bezier spécifiques. Utilisez les préréglages pour partir de celles-ci, puis faites glisser les poignées pour personnaliser.
Où coller le résultat ?: Utilisez la valeur cubic-bezier() comme fonction de temporisation dans une transition ou animation, par exemple transition: all 0.4s cubic-bezier(...).
Quelque chose est-il envoyé à un serveur ?: Non. L'éditeur fonctionne entièrement dans votre navigateur et rien n'est envoyé.