Déclenchement des animations CSS : hover, active et autres pseudo-classes

Question

Bonjour Louis-Nicolas,
Les animations CSS fonctionnent-elles uniquement avec :hover , ou peuvent-elles aussi se déclencher avec la pseudo-classe :active et d'autres ?
Merci,

Louis-Nicolas Leuillet · Accepted Answer

Salut Charlotte !
Je pense qu'il y a une petite confusion dans ta question ! :)
Les pseudo-classes comme :hover , :active , :focus , etc. ne sont pas des pseudo-éléments : ce sont des états dans lesquels se trouve un élément. On ne peut pas appliquer un :hover sur un :active , car ce sont deux états distincts qui s'appliquent au même élément.
En revanche, tu peux tout à fait combiner plusieurs pseudo-classes sur un même élément, ou les utiliser indépendamment pour déclencher des transitions différentes.
Je te fais un petit exemple ici :
button {
background-color: white;
transition: all 0.3s;
}
/* Quand on survole le bouton */
button:hover {
background-color: blue;
}
/* Quand on clique dessus */
button:active {
transform: scale(0.95);
}
Ici, :hover et :active sont deux états séparés du bouton. Quand tu survoles, le fond devient bleu. Quand tu cliques le bouton rétrécit légèrement.

Charlotte Le Verdier · Answer

J’ai sans doute mal formulé ma question. Je me demandais s’il était possible d’appliquer une animation ou une transition à un autre état que :hover, par exemple :active ou même à l’état de base. Ta réponse répond bien à ma question, merci beaucoup.

Déclenchement des animations CSS : hover, active et autres pseudo-classes

Formation Apprendre HTML (legacy)