Réalisez des animations dynamiques

Compétences évaluées

Réaliser des animations dynamiques

Description

Dans ce quiz, vous allez créer vos premières animations @keyframes.

Ce quiz n'est pas comme les deux précédents. Il vérifie vos connaissances mais aussi votre pratique sur un exemple concret. Veillez à suivre les questions dans l'ordre et effectuer les tâches demandées.Ce quiz ressemble à un TP et vous prendra donc sûrement plus de temps que les deux autres, c'est normal !

Les premières questions sont des questions générales sur les compétences apprises dans la partie 3. Pour les questions 6, 7, 8, 9 et 10, vous allez devoir travailler sur le repository GitHub dont vous aviez eu besoin pour le quiz de la deuxième partie.

Vérifiez le fichier README.md pour obtenir quelques instructions supplémentaires sur comment le faire tourner.
Alors à vous de jouer ! 💪

Question 1

Quels snippets de code me permettent de créer une animation @keyframes ?

Attention, plusieurs réponses sont possibles.

@keyframes mon-animation {
    0%: {
        transform: scale(1);
    }
    100%: {
        transform: scale(1.2);
    }
}

@keyframes mon-animation {
100% {
    transform: scale(1.2);
  }
0% {
    transform: scale(1);
  }
 }

@keyframes mon-animation {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}

@keyframes mon-animation {
    from: {
        transform: scale(1);
    }
    to: {
        transform: scale(1.2);
    }
}

Question 2
Une animation @keyframes peut être déclenchée en CSS…
Attention, plusieurs réponses sont possibles.
- par le survol d'un élément par la souris avec la pseudoclasse :hover
- au moment d'un clic sur un élément avec :active
- dès le chargement d'une page
- juste avant la fermeture de la page
Question 3
J'ai besoin d'aide.

Lorsque je code un bouton avec une animation @keyframes, l'animation n'est pas du tout fluide. J'ai le code suivant :
```
<div class="grow-element">
    Je grossis
</div>
```
```
@keyframes grow {
0% {
    transform: scale(1);
  }
100% {
    transform: scale(1.2);
  }

}

.grow-element {
  border: 1px solid black;
  width: 100px;
  cursor: pointer;
}

.grow-element:active {
  animation: grow 200ms;
}
```
Quand je clique dessus, mon élément grossit bien comme je le souhaite. Mais lorsque j'arrive à la fin de mon animation, catastrophe. L'animation s'arrête de manière brutale, et revient à la valeur de départ, avant même que j'arrête de cliquer. Comment faire pour fluidifier tout ça, et qu'il reste à une échelle de 1.2 tant que je maintiens mon clic activé ?
- Préciser la valeur backwards pour animation-fill-mode
- Changer le timing de mon animation
- Utiliser une valeur de scale de 1.1 au lieu de 2
- Préciser la valeur forwards pour animation-fill-mode

Réalisez des animations dynamiques

Compétences évaluées

Description

Question 1

Question 2

Question 3