Chapitre 185 | Les transitions animées

Transition en CSS

La propriété transition en CSS permet de rendre les changements de style (comme la couleur, la taille, ou la bordure) progressifs plutôt qu’immédiats. Cela rend les interactions plus fluides et esthétiques.

Syntaxe générale de transition

transition: propriété durée fonction_de_transition délai;

• propriété : La propriété CSS à animer (par ex. color, font-weight).
• durée : Le temps de la transition (ex. 0.3s pour 0,3 seconde).
• fonction_de_transition (optionnelle) : La courbe d’accélération (ex. ease, linear, etc.).
• délai (optionnel) : Le temps à attendre avant de lancer la transition (ex. 0.2s).

Où placer transition ?

Vous placez la propriété transition dans le style de l’élément d’origine (par exemple, .google-link dans cet exemple). Cela indique quelles propriétés seront animées quand il y aura un changement de style, comme au survol (:hover).

Exemple expliqué

Veuillez utilisé le code de l’exercice précédent.

.google-link { 
    text-decoration: none; /* Pas de soulignure au repos */
    color: black; /* Texte noir par défaut */
    font-weight: normal; /* Texte normal */
    transition: color 0.3s, font-weight 0.3s, text-decoration 0.3s; /* Animation fluide */
}

.google-link:hover {
    color: red; /* Texte devient rouge au survol */
    font-weight: bold; /* Texte devient gras au survol */
    text-decoration: underline; /* Souligné au survol */
}

1. Dans .google-link :
   • La propriété transition est définie. Elle applique une animation sur les propriétés color, font-weight, et text-decoration sur une durée de 0.3 seconde.
2. Dans .google-link:hover :
   • Les styles changent : la couleur devient rouge, le texte passe en gras et souligné. Grâce à la transition, ces changements sont progressifs.

Résultat visuel

• Au survol, le texte passe doucement de noir à rouge, devient gras et se souligne, au lieu de changer instantanément.

Exploration

Voici plusieurs exemples de transitions CSS amusantes pour explorer différentes propriétés comme la couleur, le zoom, et d’autres effets.

<div class="container">
    <div class="color-transition">1. Transition de couleur</div>
    <div class="zoom-transition">2. Transition de zoom</div>
    <div class="rotate-transition">3. Transition de rotation</div>
    <div class="blur-transition">4. Transition de flou</div>
    <div class="stretch-transition">5. Transition de taille</div>
    <div class="border-transition">6. Transition de bordure</div>
    <div class="shadow-transition">7. Transition d'ombre</div>
    <div class="fade-transition">8. Transition de transparence</div>
    <div class="combo-transition">9. Transition combinée</div>
    <div class="text-transition">10. Transition de texte</div>
</div>

1. Transition de couleur (classique)

CSS :

.color-transition {
    background-color: lightblue;
    transition: background-color 0.5s ease; /* Animation douce */
}

.color-transition:hover {
    background-color: coral; /* Change de couleur au survol */
}

2. Transition de zoom (effet d’agrandissement)

CSS :

.zoom-transition {
    transform: scale(1); /* Taille normale */
    transition: transform 0.3s ease-out; /* Animation fluide */
}

.zoom-transition:hover {
    transform: scale(1.2); /* Zoom au survol */
}

3. Transition de rotation (fun !)

CSS :

.rotate-transition {
    transform: rotate(0deg); /* Pas de rotation */
    transition: transform 0.5s ease; /* Animation fluide */
}

.rotate-transition:hover {
    transform: rotate(360deg); /* Fait une rotation complète au survol */
}

4. Transition de flou (effet artistique)

CSS :

.blur-transition {
    filter: blur(0); /* Pas de flou */
    transition: filter 0.4s ease; /* Animation fluide */
}

.blur-transition:hover {
    filter: blur(5px); /* Applique un flou au survol */
}

5. Transition de changement de taille (effet étirement)

CSS :

.stretch-transition {
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    transition: width 0.4s ease, height 0.4s ease; /* Animation sur taille */
}

.stretch-transition:hover {
    width: 150px; /* Augmente la largeur au survol */
    height: 150px; /* Augmente la hauteur au survol */
}

6. Transition de bordure (effet subtil mais cool)

CSS :

.border-transition {
    border: 2px solid black; /* Bordure normale */
    transition: border-color 0.4s ease, border-width 0.4s ease;
}

.border-transition:hover {
    border-color: red; /* Change la couleur de bordure */
    border-width: 8px; /* Augmente l'épaisseur de bordure */
}

7. Transition d’ombre (effet pop)

CSS :

.shadow-transition {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Ombre discrète */
    transition: box-shadow 0.4s ease;
}

.shadow-transition:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5); /* Ombre plus forte */
}

8. Transition de transparence (fade-in / fade-out)

CSS :

.fade-transition {
    opacity: 1; /* Complètement visible */
    transition: opacity 0.5s ease; /* Animation fluide */
}

.fade-transition:hover {
    opacity: 0.5; /* Demi-transparent au survol */
}

9. Transition combinée (zoom + rotation)

CSS :

.combo-transition {
    transform: scale(1) rotate(0deg); /* Pas de zoom, pas de rotation */
    transition: transform 0.5s ease;
}

.combo-transition:hover {
    transform: scale(1.5) rotate(180deg); /* Zoom et rotation */
}

10. Transition de texte avec changement de couleur et soulignure

CSS :

.text-transition {
    color: black;
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.text-transition:hover {
    color: blue;
    text-decoration: underline; /* Ajoute une soulignure */
}

Bloqué ? Envie de vérifier ?