• 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 les bases pour réaliser vos premières animations CSS ?

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

Compétences évaluées

  • Réaliser ses premières animations CSS

Description

Vous êtes arrivé jusqu'ici, c'est bien ! C'est même très bien !
Testons maintenant vos connaissances !

  • Question 1

    Vous avez un bouton avec une classe  .btn. Vous voulez créer une animation qui agrandit sa taille de 20 %, et qui change son  background-color  de orange à vert au survol de la souris. Laquelle de ces options écrites en Sass permet de le faire ?

    • .btn {
      background-color: orange;
      transform: scale(1);
      transition: scale, background-color 600ms;
      &:hover {
      background-color: green;
      transform: scale(1.2);
      }
      }
    • .btn {
      background-color: orange;
      transform: scale(1);
      transition: all 600ms;
      &:hover {
      background-color: green;
      transform: scale(20%);
      }
      }
    • .btn {
      background-color: orange;
      transform: scale(1);
      transition: all 600ms;
      &:hover {
      background-color: green;
      transform: scale(1.2);
      }
      }
    • .btn {
      background-color: orange;
      transform: scale(1);
      transition: scale 600ms;
      &:hover {
      background-color: green;
      transform: scale(1.2);
      }
      }
  • Question 2

    Parmi ces propositions, lesquelles sont un élément essentiel pour créer une transition CSS ?

    Attention, plusieurs réponses sont possibles.
    • Une propriété à animer

    • La durée de la transition

    • Un sélecteur d'ID

    • Une pseudoclasse pour déclencher l’animation

  • Question 3

    Quels principes font partie des 12 principes de l'animation ?

    Attention, plusieurs réponses sont possibles.
    • Primary Action (action principale)

    • Staging (mise en scène)

    • Timing

    • Anticipation