• 15 heures
  • Moyenne
Licence

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 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