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(<x1>, <y1>, <x2>, <y2>).

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>

Copier après la connexion

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);
}
...

Copier après la connexion

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)

Copier après la connexion

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!