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 05/04/2022
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 sonbackground-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