• 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 14/05/2020

Avez-vous compris comment faire des translations, des rotations et modifier l'opacité de vos animations ?

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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;
    }
    }
    • pt02-quiz-q3-r1

    • pt02-quiz-q3-r2

    • pt02-quiz-q3-r3

    • pt02-quiz-q3-r4