Réalisez des translations, des rotations et modifier l'opacité de vos animations

Compétences évaluées

Maîtriser les translations, les rotations et l’opacité

Description

Bienvenue dans le deuxième quiz de ce cours.
Cette fois-ci, c'est vous qui allez coder. Il est nécessaire de cloner le repository GitHub correspondant à ce cours pour répondre aux six premières questions. Vérifiez le fichier README.md pour obtenir quelques instructions supplémentaires sur comment le faire tourner.

Dans les quatre questions suivantes, nous testerons votre compréhension générale des points abordés dans la partie 2 de ce cours.

Alors, c'est parti ! 🚀

Question 1
Dans le repository, une ligne a été commentée pour animer la première carte. Décommentez cette ligne de code. Quelle propriété a été animée ?
- rotate()
- width
- transform
- transition

Question 2

Lequel de ces snippets nous donne une animation permettant de faire apparaître la définition du deuxième principe de manière fluide ?

.principal-2 {
.btn:active + .card > .card__front {
    transform: scale(0);
    transform: rotate(-190deg);
    transition: 0.5s ease-in-out;
   }
}

.principal-2 {
 & .btn:active + .card > .card__front {
       transform: scale(0);
   }
}

.principal-2 {
 & .btn:active + .card > .card_front {
       transform: opacity(0);
       transition-duration: 0.5s;
   }
}

.principal-2 {
.btn:active + .card > .card__front {
       opacity: 0;
       transform: rotate(60deg) scale(0);
       transition: 0.5s ease-in-out;
   }
}

Question 3

Laquelle de ces animations correspond à ce snippet de code ?

.principal-3 {
   .btn:active + .card > .card__front {
       transform: scale(2);
       opacity: 0;
       transition: all ease-in-out 0.5s;
   }
 }