Slide in child element on parent hover [duplicate] - html

Question

This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed last year.
I'm having an issue with a button animation I'm trying to make. I want a description box to slide out from behind a button when the button is hovered over, but in the way that I'm doing it, it has no transition and just snaps to its position. My setup is below:
.button {
position: absolute;
display: flex;
padding:7px;
margin: 20px;
background-color: red;
}
.button > .popout {
display: none;
position: absolute;
padding: 2px;
background-color: blue;
color: white;
transition: 1s;
}
.button:hover > .popout {
display: block;
transform: translateX(20px);
}
<div class="button">
<div class="icon">
O
</div>
<div class="popout">
email
</div>
</div>
when what I really want is the "email" text to glide out from beneath the O background without showing any blue or text on the left of the O. Sorry if I didn't do this right or provide enough info, I'm very new to stack overflow and just getting back into HTML and CSS after leaving it alone for a while

Answer 1

Animations don't work with display: none/block, you have to use visibility: hidden/visible:
.button {
position: absolute;
display: flex;
padding:7px;
margin: 20px;
background-color: red;
}
.button > .popout {
visibility: hidden;
position: absolute;
padding: 2px;
background-color: blue;
color: white;
transition: 1s;
}
.button:hover > .popout {
visibility: visible;
transform: translateX(20px);
}
<div class="button">
<div class="icon">
O
</div>
<div class="popout">
email
</div>
</div>