Explication détaillée de la propriété css3transition

La transition CSS3 nous permet de créer un effet de transition entre deux styles CSS différents. En utilisant l'attribut transition, nous pouvons définir comment une propriété CSS se transforme d'une valeur à une autre. Ce changement peut être déclenché par des événements de souris (tels que :hover), des pressions sur des boutons, etc.

Utilisation de base de l'attribut transition

En CSS3, l'attribut transition est utilisé pour spécifier comment passer d'un style CSS à un autre. Voici un exemple de base d'utilisation de l'attribut transition :

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s;
}
div:hover{
  width: 150px;
}

Dans le code ci-dessus, lorsque la souris passe sur l'élément div, la largeur de l'élément div passera de 50px à 150px, et l'effet de transition durera 2 secondes.

Syntaxe détaillée de l'attribut de transition

La syntaxe de l'attribut de transition est la suivante :

transition: [property] [duration] [timing-function] [delay];

Où :

[propriété] : Nom de l'attribut CSS de transition, qui peut être un seul attribut ou plusieurs attributs, séparés par des virgules.

[durée] : Précisez la durée de la transition, en secondes (s) ou millisecondes (ms).

[timing-function] : Spécifiez la fonction temporelle de la transition, qui peut être facilité, linéaire, facilité d'entrée, facilité de sortie, facilité d'entrée, cubique-bézier().

[délai] : Spécifiez le délai avant le début de l'exécution de la transition, en secondes (s) ou millisecondes (ms).

Sur la base de la syntaxe ci-dessus, nous pouvons définir des effets de transition plus complexes via l'attribut transition.

La valeur de l'attribut de transition

Voici les valeurs facultatives et les valeurs par défaut de l'attribut de transition :

[propriété] : nom de la propriété CSS, telle que hauteur, largeur, arrière-plan- couleur, etc.

[durée] : temps, tel que 1 s, 3,5 s, 500 ms, etc., la valeur par défaut est 0 s

[timing-function] : fonction de temps, telle que linéaire, facilité, facilité d'entrée, facilite-sortie, facilité-entrée-sortie, cubique-bézier, la valeur par défaut est facilité .

[délai] : temps, tel que 1 s, 3,5 s, 500 ms, etc., la valeur par défaut est 0 s.

Attribut transition-timing-function

L'attribut transition-timing-function est utilisé pour spécifier la fonction temporelle de la transition. Il détermine comment les valeurs des propriétés CSS passent en douceur de la valeur de départ à la valeur de fin. Les fonctions de temps courantes incluent :

linéaire : assouplissement à vitesse constante, c'est-à-dire un mouvement uniforme

ease : valeur par défaut. Commencez lentement, changez rapidement au milieu et ralentissez à nouveau à la fin

ease-in : commencez lentement

ease-out : terminez lentement

ease-in-out : commencez et terminez lentement

cubic-bezier : fonction de temps personnalisée

attribut transition-delay

L'attribut transition-delay est utilisé pour spécifier le temps de retard de l'effet de transition. C'est-à-dire combien de temps l'effet de transition attend pour commencer à s'exécuter après avoir été déclenché. Si une valeur de délai est spécifiée, l'effet de transition commencera à s'exécuter après un délai du temps spécifié après le déclenchement.

Exemples d'attributs de transition

Voici quelques exemples d'attributs de transition :

Origine de la transition

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s;
  transform-origin: top;
}
div:hover{
  width: 150px;
  transform: rotate(45deg);
}

Dans le code ci-dessus, lorsque la souris survole l'élément div, la largeur de l'élément div sera convertie de 50px en 150px et l'effet de transition durera 2 secondes. Dans le même temps, l’élément div pivote de 45 degrés autour du sommet.

Attributs multiples

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}
div:hover{
  width: 150px;
  height: 150px;
  background-color: blue;
}

Dans le code ci-dessus, lorsque la souris survole l'élément div, la largeur, la hauteur et la couleur d'arrière-plan de l'élément div changeront en même temps et l'effet de transition durera 2 secondes.

Fonction de temps personnalisée

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover{
  width: 150px;
}

Dans le code ci-dessus, lorsque la souris survole l'élément div, la largeur de l'élément div passera de 50px à 150px, et cet effet de transition durera 2 secondes. Dans le même temps, nous avons utilisé cubique-bezier() pour personnaliser la fonction time afin de rendre l'effet de transition plus personnalisé.

Résumé

Les effets de transition CSS3 sont très puissants et divers effets de transition complexes peuvent être définis via l'attribut de transition. En maîtrisant les connaissances pertinentes en matière de transition, nous pouvons concevoir des effets d'animation dans les pages Web de manière plus colorée.

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!