Transition de plusieurs propriétés
Appliquez simultanément des transitions à plusieurs propriétés CSS avec des valeurs séparées par des virgules.
Transition de plusieurs propriétés est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Pourquoi utiliser plusieurs transitions de propriétés ?
Les interactions réelles d'une interface impliquent souvent la modification simultanée de plusieurs propriétés : couleur d'arrière-plan, ombre et échelle au survol. CSS permet de définir une accélération et une durée indépendantes pour chaque propriété.
Transitions séparées par des virgules
Répertoriez plusieurs transitions en les séparant par une virgule. Chaque entrée s'applique indépendamment à une propriété :
<div class="card">Card</div>Durées différentes selon la propriété
Attribuez une vitesse différente à chaque propriété pour obtenir un rendu superposé et naturel :
<button class="btn">Hover-ready button</button>Accélérations différentes selon la propriété
Mélangez les fonctions d'accélération afin que chaque propriété ait un comportement adapté :
<div class="modal">Modal content</div>Inconvénients de transition: all
Utiliser transition: all signifie que toutes les propriétés qui changent utilisent le même minutage. Cela peut provoquer des animations indésirables sur les propriétés qui devraient changer instantanément, comme display ou les changements de position.
Transitions interruptibles
Les transitions CSS peuvent être interrompues. Si l'état de survol se termine au milieu de la transition, celle-ci s'inverse à partir de la valeur animée actuelle, et non à partir de l'état final. Les inversions sont ainsi fluides, sans sauts brusques.
Coordonner l'entrée et la sortie
Utilisez des durées différentes pour l'entrée et la sortie du survol en surchargeant les transitions dans l'état :hover :
<div class="card demo-active">Card</div>Créer un décalage avec un délai
Ajoutez des délais croissants aux éléments frères pour créer un effet de révélation décalée :
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>Propriétés personnalisées CSS pour le décalage
Attribuez le délai de décalage à partir d'une propriété personnalisée CSS définie via JavaScript ou HTML :
<div class="item">Item</div>Transition ou animation
Utilisez les transitions pour les changements à deux états (inactif → survol). Utilisez les animations @keyframes pour les séquences à plusieurs étapes, les effets en boucle ou les animations qui démarrent automatiquement.
Optimisation avec will-change
Indiquez au navigateur quelles propriétés seront animées afin de permettre une préoptimisation. Utilisez cette propriété avec parcimonie : elle consomme de la mémoire GPU.
<div class="card">Card</div>Vérification rapide
Une carte possède transition: background 150ms, transform 250ms sur son état de base. Lorsqu'elle est survolée, que se passe-t-il si l'utilisateur éloigne rapidement le curseur au milieu de l'animation ?
Récapitulatif
Les transitions séparées par des virgules permettent à chaque propriété d’avoir sa propre durée, sa propre courbe d’accélération et son propre délai. Évitez transition: all : cette déclaration peut animer des propriétés involontaires. Les transitions peuvent être interrompues et s’inversent en douceur depuis leur position actuelle. Utilisez des délais pour créer des effets décalés.
Questions Fréquemment Posées
La leçon « Transition de plusieurs propriétés » est-elle gratuite ?
Oui — le texte complet de « Transition de plusieurs propriétés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Transition de plusieurs propriétés » ?
Appliquez simultanément des transitions à plusieurs propriétés CSS avec des valeurs séparées par des virgules. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Transition de plusieurs propriétés » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Durée et temporisation des transitions
- Fonctions d’accélération : ease, linear, cubic-bezier
- Transition de plusieurs propriétés
- Performances : propriétés transformables et repeintes