Bonjour,
j'ai une animation qui fonctionne parfaitement avec la pseudo classe ":hover", mais pas avec ":checked".
voici mon code html :
et voici mon code scss :
le but est d'avoir ce résultat :
quelqu'un peut-il me dire où se trouve mon erreur s'il vous plaît ?
j'ai une animation qui fonctionne parfaitement avec la pseudo classe ":hover", mais pas avec ":checked".
voici mon code html :
<div class="entrees">
<input type="checkbox" id="coche-palette-gout">
<label class="vide" for="coche-palette-gout">
<div class="infos1">
<div class="entrees__nom">
<h4>Fricassée d'escargot</h4>
</div>
<div class="entrees__compo-prix">
<p>Au piment d'Espelette</p>
<p>25€</p>
</div>
</div>
<div class="coche">
<i class="fas fa-check-circle"></i>
</div>
</label>
</div>
et voici mon code scss :
.coche{
display: none;
margin-left: -4em;
background-color: $couleur-tertiaire;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 1em;
width: 4em;
height: 4.5em;
i{
margin: auto;
color: white;
font-size: 2em;
}
}
.entrees{
display: flex;
[id="coche-palette-gout"]{
display: inherit;
}
&:checked +label{
.coche{
display: inherit;
transform-origin: right;
animation: coche 500ms forwards;
i{
animation: coche-rotation 500ms forwards;
}
}
.entrees__compo-prix{
animation: reduc-div 500ms forwards;
}
}
}
le but est d'avoir ce résultat :
quelqu'un peut-il me dire où se trouve mon erreur s'il vous plaît ?