Points de contrôle
0.4, 0, 0.2, 1
Sortie
cubic-bezier(0.4, 0, 0.2, 1)
Outils de design
Courbe de Bézier cubique CSS — Débogueur de courbe d’accélération
Modifiez visuellement les quatre points de contrôle d’une courbe de Bézier cubique, prévisualisez l’accélération et copiez une fonction de temporisation CSS. Utile pour le mouvement des boutons et les transitions de page.
CSSAnimationAssouplissement
Ajouter cet outil aux favoris
Aucun mode de stockage des favoris n’a été sélectionné.
Actions rapides
Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.
设计配色
Courbe de Bézier cubique CSS
Modifiez visuellement les quatre points de contrôle d’une courbe de Bézier cubique, prévisualisez l’accélération et copiez une fonction de temporisation CSS. Utile pour le mouvement des boutons et les transitions de page.
最终 CSS 转场代码
调整控制点或时长后，预览动画和复制代码会保持一致。
Cas d’usage
- Régler la synchronisation du mouvement du bouton
- Construire faciliter les transitions de page
- Faire correspondre une courbe de mouvement à partir d'un fichier de conception
Mode d’emploi
- Faites glisser ou entrez les quatre points de contrôle
- Aperçu de la courbe et de l'animation
- Copier la valeur du bézier cubique
Exemples d’entrée et de sortie
FAQ
Puis-je l'utiliser directement dans transition ?
Oui. Collez cubique-bézier(...) dans transition-timing-function ou animation-timing-function.
Quelle plage les points de contrôle utilisent-ils ?
x est généralement compris entre 0 et 1 ; Vous pouvez sortir de 0-1 en cas de dépassement. Confirmez la sensation dans l'aperçu.
Outils
Outils associés
Poursuivez avec un autre outil traduit pour une tâche proche.
Générateur de dégradé CSS
Générateur de dégradé CSS – Linéaire, Radial, Conique
Créez visuellement des dégradés CSS linéaires, radiaux et coniques. Ajustez l'angle et les positions des arrêts, ajoutez plusieurs arrêts et copiez le CSS pour les arrière-plans, les boutons et les transitions de marque.
CSS Dégradé Arrière-plan
Générateur de serrage CSS
Générateur de serrage CSS — Tailles adaptées aux fluides
À partir des largeurs de fenêtre min/max et d'une plage de tailles cible, calculez une formule clamp() pour les tailles de police fluides, l'espacement et d'autres longueurs qui évoluent avec la fenêtre.
CSS clamp Adaptatif