communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Propriété transition-timing-function de transition CSS3

3. fonction de synchronisation de transition :

Syntaxe :

fonction de synchronisation de transition : facilité | facilité d'entrée | facilité d'entrée | -bezier(<numéro>, <numéro>, <numéro>, <numéro>) [, facilité | facilité-entrée | facilité-entrée-sortie | ;, <number>, <number>, <number>)]*

Valeur :

transition-timing - Le value of function vous permet de modifier le taux de transformation des valeurs d'attribut en fonction de l'avancement du temps. La fonction de transition-timing a 6 valeurs possibles :

1. valeur par défaut, la fonction d'aisance est équivalente à la courbe de Bézier (0,25, 0,1, 0,25, 1,0).

2. linéaire : (vitesse uniforme), la fonction linéaire est équivalente à la courbe de Bézier (0,0, 0,0, 1,0, 1.0).

3. easy-in : (accélération), la fonction d'easy-in est équivalente à la courbe de Bézier (0,42, 0, 1.0, 1.0).

4. (décélération), facilité- La fonction out est équivalente à la courbe de Bézier (0, 0, 0,58, 1,0).

5. -out la fonction est équivalente à la courbe de Bézier (0,42, 0, 0,58, 1,0)

6. cubique-bézier : (Cette valeur permet de personnaliser une courbe temporelle), une courbe cubique-bézier spécifique. Les quatre valeurs (x1, y1, x2, y2) sont spécifiques aux points P1 et P2 de la courbe. Toutes les valeurs doivent être comprises dans la plage [0, 1], sinon elles seront invalides.

Il est cubique-bézier de calculer la valeur de l'attribut dans le processus de "conversion" à travers la courbe de Bézier, comme le montre la courbe suivante, en changeant les coordonnées de P1 (x1, y1) et P2 (x2, y2 ) Le pourcentage de sortie de l'ensemble du processus peut être modifié. La valeur par défaut initiale est default.

cubic-bezier.png


Diagramme schématique de plusieurs autres propriétés :


transition-timing-function.png

Exemple de code :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="//m.sbmmt.com/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
   
  transition-duration:2s,6s;
  -moz-transition-duration:2s,6s;
  -webkit-transition-duration:2s,6s;
  -o-transition-duration:2s,6s;
   
  transition-timing-function:ease-in,linear;
  -moz-transition-timing-function:ease-in,linear;
  -webkit-transition-timing-function:ease-in,linear;
  -o-transition-timing-function:ease-in,linear;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>


Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <title>php中文网</title> <style> #thediv{ width:100px; height:100px; background:blue; transition-property:width,height; -moz-transition-property:width,height; -webkit-transition-property:width,height; -o-transition-property:width,height; transition-duration:2s,6s; -moz-transition-duration:2s,6s; -webkit-transition-duration:2s,6s; -o-transition-duration:2s,6s; transition-timing-function:ease-in,linear; -moz-transition-timing-function:ease-in,linear; -webkit-transition-timing-function:ease-in,linear; -o-transition-timing-function:ease-in,linear; } #thediv:hover{ width:500px; height:200px; } </style> </head> <body> <div id="thediv"></div> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492350 joue