CSS Animation (Appear from the side by clicking) - html

Question

I'm trying to make something apppear from the right side in a div when I'm click on it.
It's a Div (dish) that have 2 Div in it (infoDish) and (validation).
infoDish have a width of 100%, validation have a width of 20% but is hidden unless I click on Dish.
I can make validation appear and disappear but the thing is it's instantaneus and I want to create an animation that take 1 or 2 seconds to make it appear from the right side (like you open the window from the right to the left).
.plat {
border: 1px solid black;
height: 70px;
width: 95%;
display: flex;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 20px;
background-color: white;
margin-bottom: 20px;
margin-left: 3%;
cursor: pointer;
}
.plat:hover .divValid {
border: 1px solid purple;
background-color: #99E2D0;
border-radius: 0 20px 20px 0;
justify-content: center;
align-items: center;
height: 100%;
width: 20%;
}
.partRouge {
border: 1px solid red;
height: 100%;
width: 100%;
}
.divTitlePlat {
border: 1px solid orangered;
height: 50%;
width: 100%;
padding-left: 2%;
}
.divTitlePlat h3 {
font-size: 20px;
margin-top: 0;
}
.divInfoPlat {
border: 1px solid blue;
height: 50%;
width: 100%;
display: flex;
justify-content: space-between;
}
.divDescPlat {
border: 1px solid green;
height: 100%;
width: 80%;
padding-left: 2%;
}
.divPricePlat {
border: 1px solid yellow;
height: 100%;
width: 20%;
}/*# sourceMappingURL=menuresto.css.map */
<div class="plat">
<div class="partRouge">
<div class="divTitlePlat">
<h3>Tartare de poulpe acidulé</h3>
</div>
<div class="divInfoPlat">
<div class="divDescPlat">
<span>Aux zests d'orange</span>
</div>
<div class="divPricePlat">
<span class="price">25€</span>
</div>
</div>
</div>
<div class="divValid">
<!--<i class="fa-solid fa-circle-check"></i>-->
</div>
</div>

Answer 1

I don't know if I understood what you really want to do...
But if you want to add a little delay, not to change instantly you can add the CSS property transition in the class with the hover. You can even precise for each property you want a delay and the delay. To do this, you have to write:
transition: 1s;
To have more informations about this property, you can read:
https://www.w3schools.com/css/css3_transitions.asp
With your code, it's not perfect but if it's what you were searching for, the changement on the hover is now not instantly, but with a delay of 1 second.
.plat {
border: 1px solid black;
height: 70px;
width: 95%;
display: flex;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 20px;
background-color: white;
margin-bottom: 20px;
margin-left: 3%;
cursor: pointer;
}
.plat:hover .divValid {
border: 1px solid purple;
background-color: #99E2D0;
border-radius: 0 20px 20px 0;
justify-content: center;
align-items: center;
height: 100%;
width: 20%;
transition: 1s;
}
.partRouge {
border: 1px solid red;
height: 100%;
width: 100%;
}
.divTitlePlat {
border: 1px solid orangered;
height: 50%;
width: 100%;
padding-left: 2%;
}
.divTitlePlat h3 {
font-size: 20px;
margin-top: 0;
}
.divInfoPlat {
border: 1px solid blue;
height: 50%;
width: 100%;
display: flex;
justify-content: space-between;
}
.divDescPlat {
border: 1px solid green;
height: 100%;
width: 80%;
padding-left: 2%;
}
.divPricePlat {
border: 1px solid yellow;
height: 100%;
width: 20%;
}/*# sourceMappingURL=menuresto.css.map */
<div class="plat">
<div class="partRouge">
<div class="divTitlePlat">
<h3>Tartare de poulpe acidulé</h3>
</div>
<div class="divInfoPlat">
<div class="divDescPlat">
<span>Aux zests d'orange</span>
</div>
<div class="divPricePlat">
<span class="price">25€</span>
</div>
</div>
</div>
<div class="divValid">
<!--<i class="fa-solid fa-circle-check"></i>-->
</div>
</div>