JSFiddle - React, Tailwind, and code Playground

HTML

<p>Вопрос</p>
     <h1>Ответ</h1>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none; 
color: red;}

@keyframes vras{
    100% {
        left: 100px;
        opacity: 0;
        transform: scale(.9);
    }
}
@keyframes vras2{
	0%{
		transform: scale(.9);
		}
    100% {
        left: 0px;
        opacity: 1;
        transform: scale(1.1);
    }
}
p{
    left: 0;
    margin-left: 100px;
    position: relative;
    width: 100px;
    height: 200px;
    background: black;
}
p:hover{
    animation: vras 1s;
    animation-fill-mode: forwards;
}
p:hover+h1{
    animation: vras2 1s .7s;
    animation-fill-mode: forwards;
}
h1{
    left: 100px;
    top: 0;
    opacity: 0;
    margin-left: 100px;
    position: absolute;
    width: 100px;
    height: 200px;
    background: black;
}