Raisons pour lesquelles l'attribut de transition en CSS ne fonctionne pas et comment le résoudre

La propriété de transition en CSS peut être utilisée pour ajuster le moment où un élément change, et elle peut être affichée comme une animation. Bien que l'attribut de transition puisse facilement produire des effets de transition, il peut parfois être invalide, nous devons donc comprendre les règles d'écriture de l'attribut de transition.

Regardons d'abord la raison pour laquelle l'attribut transition en CSS ne fonctionne pas

La transition est une méthode qui vous permet de Propriétés qui spécifient les heures de changement, etc.

Lorsqu'il est utilisé pour définir le timing des changements de couleur et de taille lorsque le curseur de la souris est placé sur un bouton, il peut avoir un effet de type animation. Le

format de transition est le suivant

选择器名称{ 
    transition-property：value; 
    }

Les valeurs qui peuvent être spécifiées sont :

toutes : Vous pouvez spécifier toutes les propriétés qui s'appliquent à la transition.

aucun : aucun attribut modifié.

Nom de la propriété : Spécifiez le nom de la propriété à laquelle la transformation doit être appliquée. Les multiples peuvent être spécifiés via des virgules.

De nombreuses raisons pour lesquelles les transitions ne fonctionnent pas sont généralement les transitions décrivant des événements de survol, alors faites plus attention.

Étant donné qu'un mouvement animé peut être obtenu, certains effets sont faciles à mettre en œuvre à l'aide de l'attribut de transition.

Jetons un coup d'œil à l'utilisation spécifique de l'

attribut de transition

Comme mentionné ci-dessus, n'utilisez pas l'attribut de transition dans les événements de survol.

HTML

<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>

CSS

p {
  width:100px;
  background-color:red;
  transition-duration: 2s;
  transition-property:width;
}
p:hover {
  width:420px;
  background-color:blue;
}

Lorsque la souris n'est pas posée dessus, le navigateur affichera l'effet suivant

Lorsque la souris est placée sur le fond rouge, le navigateur affiche l'effet suivant :

La balise p précise la largeur : 100px et background-color:red; Dans ce cas, lorsque la largeur est de 100 px, l'arrière-plan est rouge. La durée de transition est précisée ci-dessous : 2 s ;

Dans ce cas, le temps du début à la fin de l'effet obtenu par la transition est de 2 secondes.

Le dernier est transition-property:width ; l'effet de l'application de la propriété de transition est uniquement la largeur.

: Spécifiez la largeur : 420px et l'arrière-plan - couleur : bleu en survol De cette façon, lorsque vous déplacez la souris dessus, la largeur devient 420px et l'arrière-plan devient bleu.

Si vous passez la souris, la largeur sera de 420 px et l'arrière-plan sera bleu, mais l'effet de transition sera uniquement en largeur. Le changement de 2 secondes n'est que la largeur. Étant donné que l'effet de transition ne s'applique pas à la couleur d'arrière-plan spécifiée, il deviendra bleu chaque fois que vous le survolerez.

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!