JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">родитель
    <div class="child">потомок</div>
</div>

CSS

.parent{
position: relative;
width: 200px;
border: 1px solid #000;    
}

.child{
position: absolute;
left: 0px;
top: 0px;
width: 200px;
opacity: 0;    
-webkit-transition-property: left, opacity;
-webkit-transition-duration: 0.1s, 1s;
-webkit-transition-delay: 2s, 0.5s;    
}

.parent:hover .child{
left: 200px;
opacity: 1;
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
-webkit-transition-delay: 0.5s;    
}