Maison >interface Web >tutoriel CSS >Utilisez CSS pour créer des courbes de Bézier
Utilisez CSS pour créer des courbes de Bézier
- 一个新手original
- 2017-10-08 09:32:183061parcourir
Préface
Avant de comprendre cubic-bezier, vous devez comprendre l'effet d'animation en CSS3, qui est un contenu important dans animation-timing-function et transition-timing-function.
Ontologie
Introduction
cubic-bezier Également connue sous le nom de Bézier cubique, c'est principalement une fonction qui génère des courbes de vitesse pour animation. la stipulation est cubic-bezier(bc6fe54a88198feaad90e17e912675f1, 22e181b6d31cf86e9ad22800df920dd0, be787f7ac9828fa514a83e4c791ae092, f4bf86c47d72eed593f57bb329a5f9f8).
Nous pouvons brièvement comprendre cubic-bezier à partir de l'image ci-dessous :
Ce que nous devons savoir à partir de l'image ci-dessus, c'est la plage de valeurs de cubic-bezier :
-
P0 : Valeur par défaut (0, 0)
P1 : Valeur dynamique (x1, y1)
P2 : Valeur dynamique (x2, y2)
P3 : Valeur par défaut (1, 1)
Ce à quoi nous devons prêter attention, ce sont les valeurs de P1 et P2, et la plage de valeurs de X 轴 est de 0 à 1. la valeur cubic-bezier sera invalide lorsqu'elle dépassera la plage ; la valeur de Y 轴 n'est pas spécifiée, et bien sûr, elle n'a pas besoin d'être trop grande. La compréhension la plus directe de
est de placer comme une ligne droite sur l'axe des coordonnées avec une plage de seulement 1 et de retirer deux points du milieu (la plage de valeurs de l'axe X est [0, 1], l'axe Y est arbitraire), et la courbe finale formée est la courbe de vitesse de l'animation .
Utilisation de
Dans l'exemple de test :
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.animation {
width: 50px;
height: 50px;
background-color: #ed3;
-webkit-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
.animation:hover {
-webkit-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
</style>
</head>
<body>
<p class="animation"></p>
</body>
</html>On peut voir dans le navigateur que lorsque la souris est déplacée sur l'élément, l'élément commence à se déplacer vers le à droite, il démarre lentement puis devient plus rapide en s'éloignant, il revient à l'origine selon la courbe d'origine.
Dans l'exemple, lorsqu'on n'ajoute pas transition ou autre cubic-bezier à timing-function, la courbe de vitesse par défaut est ease, et la courbe de vitesse à cet instant est :
Ajoutons ensuite
cubic-bezier(.17, .86, .73, .14) au code :
....animation {
... -webkit-transition:
all 2s cubic-bezier(.17, .86, .73, .14);
-o-transition: all 2s cubic-bezier(.17, .86, .73, .14);
transition: all 2s cubic-bezier(.17, .86, .73, .14);
}
... Actualisez ensuite la page pour observer l'effet. Vous verrez que l'animation se déplace très lentement pendant le processus d'exécution. La vitesse est similaire. La courbe de mouvement à ce moment est :
Plusieurs valeurs fixes couramment utilisées correspondant à la valeur cubic-bezier et à la courbe de vitesse <.>
ease：cubic-bezier(.25, .1, .25, 1) liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0) ease-in：cubic-bezier(.42, 0, 1, 1) ease-out：cubic-bezier(0, 0, .58, 1) ease-in-out：cubic-bezier(.42, 0, .58, 1) In Out . Back（来回的缓冲效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!