Slide in child element on parent hover

Question

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>