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

Réalisez vos premières animations CSS

Compétences évaluées

Description

Question 1

Question 2

Question 3