I'm trying to recreate this particular "animation" from this Video when the text of the logo comes out. I tried using overflow: hidden; and justify-content: center; on the parent and opacity: 0; on the text of the logo but problem is it's still counting as being visible. I would use display: none; but then I can't have an animation. Here is my html

<div class="navbar-left-container">
    <div class="navbar-left-ident">
        <div class="icon">rocket</div>
        <span class="name">Websitename</span>
    </div>
</div>

Any help is appreciated!