• 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 07/02/2024

Réalisez vos premières animations CSS

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

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous