Transitions et animations — Correction d'exercices

Voici des propositions de solutions en mode console (via readline()). N’hésite pas à les adapter.

#1 — Transition simple

Ajoute une transition de 0.3s sur la couleur de fond d'un bouton.

Voir le corrigé

button {
    transition: background-color 0.3s ease;
}

Fais en sorte qu'une transition commence avec un retard de 0.5s.

Voir le corrigé

.box {
    transition-delay: 0.5s;
}

Définis une animation nommée 'fade' qui passe d'une opacité de 0 à 1.

Voir le corrigé

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

Applique l'animation 'fade' pendant 2 secondes en boucle infinie sur une image.

Voir le corrigé

img {
    animation: fade 2s infinite;
}

Utilise transform pour agrandir un élément de 20% au survol.

Voir le corrigé

.zoom:hover {
    transform: scale(1.2);
}