Les transitions CSS permettent des changements de propriété lisses avec un code minimal, idéal pour les effets de survol et la rétroaction interactive. 1. Utilisez la transition de la syntaxe: Durée de la propriété Délai de fonction de synchronisation; Pour définir les transitions, comme la transition: Color de l'arrière-plan 0.3S faciliter 0,1S ;. 2. Spécifiez la property de transition pour que la propriété CSS puisse animer, préférant la couleur d'arrière-plan, l'opacité ou la transformation sur des propriétés non interpolables comme l'affichage. 3. Définissez la durée de transition pour contr?ler la longueur d'animation, telles que 0,3 s, ce qui est nécessaire pour que la transition s'exécute. 4. Appliquer la fonction de transition de transition comme la facilité, la linéaire ou le cubic-bezier () pour définir la stimulation. 5. Utilisez le retard de transition pour retarder le début, par exemple 0,1. 6. énumérez plusieurs transitions avec des virgules pour des effets complexes. 7. Prioriser la transformation et l'opacité pour l'accélération du GPU et les meilleures performances. 8. Gardez des durées entre 200 et 500 ms pour une sensation réactive. 9. évitez la transition: tous 0,3S; pour éviter les animations involontaires. 10. Ne pas animer les propriétés de mise en page comme la largeur ou la hauteur sur les grands éléments pour éviter Jank. 11. Remplacez les bascules de l'affichage par l'opacité et les événements de pointeur pour les effets d'affichage / masque lisses, comme dans .fade {Opacity: 0; Transition: opacité 0.3S facilité; Pointer-Events: Aucun; } et .fade.active {opacité: 1; Pointer-Events: Auto; }. 12. Utilisez une sténographie pour la concision ou le long main pour plus de clarté. 13. Assurez-vous que la propriété CSS change réellement l'état (par exemple, via: en survol ou en classes) pour déclencher la transition. Lorsqu'ils sont correctement appliqués, les transitions CSS créent des interactions rapides, subtiles et performantes qui améliorent l'expérience utilisateur sans JavaScript.

Les transitions CSS sont un moyen simple de contr?ler la vitesse d'animation lors du modification des propriétés CSS - parfait pour les effets de survol, les états de bouton ou les modifications de mise en page. Vous n'avez pas besoin de javascript ou de clés complexes. Juste quelques lignes de CSS, et vous avez des commentaires visuels fluide.

Voici comment les utiliser efficacement.

Que sont les transitions CSS?

Une transition CSS vous permet de définir comment une propriété doit changer avec le temps lorsqu'elle passe d'une valeur à une autre - comme lorsqu'un utilisateur plane sur un bouton. Ce n'est pas une animation au sens traditionnel, mais une interpolation fluide entre deux états.

La syntaxe de base:

 Transition: Durée de la durée du délai de fonction de la durée de la propriété;

Exemple:

 bouton {
  Color en arrière-plan: bleu;
  Transition: Color de l'arrière-plan 0,3 s faciliter 0,1S;
}

Bouton: Hover {
  Color d'arrière-plan: rouge;
}

Cela fait passer la couleur de fond du bleu au rouge sur 0,3 seconde, avec un léger retard de 0,1 et une courbe de synchronisation "facilité".

Propriétés de transition clés

Vous n'avez pas à définir toutes les valeurs à chaque fois - la plupart peuvent être omises et retomberont à des défauts.

• transition-property
  Quelle propriété CSS à animer. COMMUNS: background-color , opacity , transform , width , color .
  Utilisez all pour animer toute propriété changeante (non recommandée pour les performances).

• transition-duration
  Combien de temps prend l'animation (par exemple, 0.5s ou 500ms ). Doit être spécifié, ou la transition ne s'exécutera pas.

• transition-timing-function
  Contr?le le rythme. Les options incluent:

  • ease (par défaut, commence lentement, se termine lentement)
  • linear (vitesse constante)
  • ease-in , ease-out , ease-in-out
  • cubic-bezier(x1, y1, x2, y2) - courbe personnalisée

• transition-delay
  Combien de temps attendre avant de commencer (par exemple, 0.2s ).

Vous pouvez également définir plusieurs transitions:

 bouton {
  transition: 
    Color de l'arrière-plan 0.3s facilité,
    transformer 0,2 s linéaire,
    OPCITAY 0.4S Factual-Out-Out;
}

Meilleures pratiques et conseils

Toutes les propriétés ne peuvent pas être en transition - uniquement celles avec des valeurs interpolables (nombres, couleurs, longueurs). Par exemple, vous ne pouvez pas display: none à block , mais vous pouvez s'estomper avec opacity et visibility .

? Faites ceci:

• Utilisez transform et opacity pour les meilleures performances (accéléré par le GPU).
• Gardez les durées courtes (200–500 ms) pour une sensation réactive.
• Ajoutez des transitions aux éléments interactifs (boutons, liens) pour la rétroaction.

? évitez:

• transition: all 0.3s; - Il peut animer les propriétés involontaires.
• Animer les propriétés de mise en page comme width , height ou margin sur de grands éléments (peut provoquer Jank).
• En utilisant des transitions display ou z-index - elles ne sont pas interpolées.

Exemple d'un bouton lisse survol:

 .btn {
  rembourrage: 10px 20px;
  Contexte: # 007BFF;
  Couleur: blanc;
  Border: aucun;
  Border-Radius: 4px;
  Transition: Toutes les 0,3 s facilité;
  curseur: pointeur;
}

.btn: Hover {
  Contexte: # 0056B3;
  transform: tradlatey (-2px);
  Box-Shadow: 0 4px 8px RGBA (0,0,0,0,2);
}

Sténographie vs long hand

Utilisez un sténographie pour la simplicité:

 Transition: Color de l'arrière-plan 0.3S facilité;

Ou à long terme pour plus de clarté:

 Property transition: Color en arrière-plan;
Durée de transition: 0,3 s;
Transition-Timing-Function: facilité;
TRANSITION-DELAY: 0S;

La sténographie est plus courante et concise.

Lorsque les transitions ne fonctionnent pas - correctifs communs

• duration oubliée? La transition ne fonctionnera pas si aucun temps n'est défini.
• La propriété ne change pas? Les transitions ne déclenchent que lorsque la valeur change (par exemple, survol, bascule de classe).
• Utilisation display ou visibility ? Ceux-ci ne se sont pas animées en douceur - utilisez plut?t pointer-events opacity .

Exemple pour afficher / se cacher:

 .dispara?tre {
  Opacité: 0;
  Transition: opacité 0.3S facilité;
  Pointer-Events: Aucun;
}

.fade.active {
  Opacité: 1;
  Pointer-Events: Auto;
}

Fondamentalement, les transitions CSS sont vos interactions subtiles et performantes. Gardez-les concentrés, rapidement et sur des propriétés qui comptent. Une fois que vous avez compris, vous les ajouterez partout - boutons, menus, ic?nes, cartes. Ils font que les sites statiques se sentent vivants.

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!