Add style when hover animation is finished - css

Question

Is it possible to add another style when the hover animation is completely finished?
With the default hover all styles get applied at the same time.
So changing from display: none to display: block will override any transformation because the element will just appear out of nowhere.
In the following example something like this would be helpful, because right now you can trigger the hover effect from outside of the actual "hover area".
.grid_content {
padding: 15px;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: salmon;
}
.grid_hover {
width: calc(100% - 30px);
height: calc(100% - 30px);
opacity: 0;
transition: all 0.5s;
transition-timing-function: cubic-bezier(1, 0.09, 0.37, 0.93);
position: absolute;
z-index: 5;
}
.bottom_left {
transform-origin: bottom left;
transform: rotate(90deg);
}
.text_overlay {
top: 50%;
width: 70%;
max-height: 80%;
margin: 0 15%;
text-align: center;
z-index: 4;
position: absolute;
}
.background_overlay {
background: #ffffff;
width: 100%;
height: 100%;
bottom: 0;
opacity: 0.95;
z-index: 1;
position: absolute;
}
.box_overlay {
border: 1.5px solid #000000;
width: calc(100% - 2vw);
height: calc(100% - 2vw);
margin: 1vw;
float: left;
z-index: 2;
position: relative;
box-sizing: border-box;
}
.grid_content:hover > .grid_hover {
opacity: 1;
transform: rotate(0);
}
.hover_here {
position: absolute;
top: 350px;
}
<div class="grid_content">
<div class="grid_hover bottom_left">
<div class="text_overlay"> <p>Lorem Ipsum</p></div>
<div class="background_overlay"></div>
</div>
</div>
<p class="hover_here">
Hover somewhere around here to see the "bug"
</p>
I also tried to just set grid_hover to pointer-events: none; that worked, but I can't use it because inside that div will be a button that has to be clickable.
My idea or what I want to achieve is something like this:
.grid_hover is set to display: none at the beginning
hovering on .grid_content will set it to display: block and after that happened the animation should run
Is there a way to make this work in just css without javascript?