Une introduction détaillée à la transition d'attribut de transition dans les éléments CSS3

TransitionL'animation est la base de l'animation

Avant d'apprendre l'animationpropriété
Nous devons d'abord comprendre la propriété de transition transition

Transition

Regardons d'abord un petit exemple

<p class="demo"></p>

.demo {    width: 100px;    height: 100px;    background-color: royalblue;}.demo:hover {    width: 200px;}

De cette façon, lorsque mon curseur survole la démo pendant un instant
sa largeur devient 200px

Existe-t-il un moyen d'élargir lentement la largeur de l'élément lorsque notre curseur le survole
Avant CSS3, nous ne pouvions utiliser que le gênant jsscript
Mais maintenant il ne nous reste plus qu'à ajouter un attribut
pour atteindre notre objectif

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s; /*增*/}.demo:hover {    width: 200px;}

transition. Sa fonction est de préciser que lorsque certains styles de vos éléments changent,
ceux-ci. les styles peuvent passer progressivement. Vers la valeur finale de la propriété

il s'agit d'une propriété composite
avec les sous-propriétés suivantes

• transition- property : spécifie l'attribut CSS de transition ou de simulation dynamique

• transition-duration : spécifiez le temps requis pour la transition

• transition-timing-function : spécifiez transition fonction

• transition-delay : Spécifiez le délai pour le début de l'occurrence

transition-property Nous pouvons écrivez quelle transition d'attribut nous voulons
Ou écrivez simplement le mot-clé pour tous les attributs de la transitiontous

La valeur de l'attribut de temps de gradient de durée de transition est "nombre + s"
Représente la transition en quelques secondes

transition-timing-function est une valeur d'attribut facultative, avec les valeurs facultatives suivantes :

• linéaire
  Transition linéaire, équivalente à Bézier courbe (0.0, 0.0, 1.0, 1.0)

• facilité (par défaut)
  Transition douce, courbe de Bézier équivalente (0.25, 0.1, 0.25, 1.0)

• allègement
  de lent à rapide, courbe de Bézier équivalente (0,42, 0, 1,0, 1,0)

• assouplissement
  de rapide à Lent, équivalent à la courbe de Bézier (0, 0, 0,58, 1,0)

• facilité d'entrée
  de lent à rapide à lent, équivalent à la courbe de Bézier (0,42, 0 , 0,58, 1,0)

• step-start
  équivaut à steps(1, start)

• step-end
  Équivalent à steps(1, end)

• steps() :
  Fonction échelon de deux paramètres. Le premier paramètre est un entier positif, spécifiant le nombre d'étapes de la fonction. La valeur du deuxième paramètre est start ou end, spécifiant le moment où la valeur de chaque étape change. Le deuxième paramètre est facultatif et la valeur par défaut est end.

• cubic-bezier(num, num, num, num):
  Type de courbe de Bézier spécifique, 4 valeurs​​doivent être dans l'intervalle [0, 1]

Nous n'utilisons pas la plupart d'entre eux. Les plus couramment utilisés sont probablement notre facilité et notre transition linéaire par défaut

le délai de transition est également une valeur d'attribut facultative
Si vous souhaitez retarder la transition, autrement dit si nous voulons nous arrêter un petit moment avant la transition
alors ajoutez le temps dont nous avons besoin pour retarder "nombre + s" à la fin de cet attribut composite

Cet attribut peut définir plusieurs attributs différents
Tout ce que nous avons à faire est de les séparer par des virgules

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s linear, 
                height 1s linear,
                background-color 2s 1s; /*改*/}.demo:hover {    width: 200px;    height: 200px;    background-color: lawngreen; /*改*/}

Une fois que la souris quitte l'élément, l'élément revient en arrière

Une autre raison d'utiliser des attributs de transition au lieu de scripts est que
les méthodes de script qui modifient les styles de plusieurs éléments peuvent provoquer des conflits
La solution consiste à utiliser boolvariables pour verrouiller, c'est quand même très gênant
Notre transition n'a pas besoin d'être autant pris en compte
Les éléments ne s'influencent pas les uns les autres

---

Encore une chose à note, éléments La transition doit connaître les attributs spécifiques de début et de fin du style
Par exemple, la largeur dans notre exemple passe clairement de 100px à 200px

.demo:hover {    width: auto; /*改*/
    height: 200px;    background-color: lawngreen; /*改*/}

et la largeur du style de suspension est modifiée vers auto
Nous avons constaté que lorsque le curseur survole l'élément, l'
attribut de largeur ne fait pas de transition

Attributs impliqués dans la transition

Bien sûr, tous les styles ne peuvent pas faire l'objet d'une transition
Par exemple, si vous souhaitez une transition <a href="http://www.php.cn/wiki/927.html" target="_blank">afficher<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:block:bloc à display:inline-block
est impossible
Les attributs suivants participent à la transition

• couleur

• visibilité

• opacité

• alignement vertical

• z-index

• clip

• largeur/hauteur

• haut/bas/gauche/droite

• couleur de fond /position

• border-top/bottom/left/right-color/width

• border/letter/word-spacing

• taille de police/poids

• hauteur de ligne

• marge/padding-haut/bas/gauche /droite

• max/min-hauteur/largeur

• contour-couleur/largeur

• text-indent/shadow

Vous pouvez voir que cet attribut est vraiment puissant

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!