transition

transition.html

<style>
#bogus {
    background: red;
    width: 50px;
    height: 30px;
    transition: 500ms all;
    position: absolute;
    right: 0;
    overflow: hidden;
    display: flex;
}
#bogus .closed {
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: 500ms all;
    flex-direction: row;
    display: flex;
}
#bogus:hover {
    width: 250px;
}
#bogus:hover .closed {
    opacity: 1;
}
.icon {
    background: green;
    padding: 5px;
    border-radius: 10px;
}
</style>

<div id="bogus">
    <div class="icon">teste</div>
    <div class="closed">
        <div class="icon">teste</div>
        <div class="icon">teste</div>
        <div class="icon">teste</div>
        <div class="icon">teste</div>
        <div class="icon">teste</div>
    </div>
</div>