15 heures
- Moyenne
Ce cours est visible gratuitement en ligne.
course.header.alt.is_video
course.header.alt.is_certifying
J'ai tout compris !Mis à jour le 05/04/2022
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;}}