CSS allow overflow-y only when transition ends - css

Question

I am having some troubles styling my div. I would like to allow overflow-y only when the height transition ends (from 80px to 100% of the parent div). If I uncoment the below "overflow-y: auto" line, the overflow-y works fine but the scroller is visible during the animation which does not look good.
.mydiv{
position: absolute;
width: 100%;
bottom: 0;
border-radius: 0 0 2px 2px;
border: solid 1px #eee;
background-color: #fff;
height: 80px;
transition: all 0.5s;
transition-timing-function: ease-in-out;
overflow: hidden;
clear: both;
}
.mydiv:hover{
height: 100%;
border-radius: 2px;
/* overflow-y: auto; !!! */
}

Answer 1

Edit: Sorry, I forgot to add the animation-fill-mode: forwards so it will pause on end frame and stay as long as hovered. Fixed now.
Edit 2: Added code to reverse anim on mouse out.
I think the only way you may be able to do what you are aiming for is with either css animation frames, or javascript.
CSS Animation (transition the properties that should animate through 99% of animation and only transition overflow property between final 1% of animation:
.mydiv:hover{
animation-duration: 0.5s;
animation-name: 'myAnim';
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#keyframes myAnim {
0% {
height: 80px;
border-radius: 0 0 2px 2px;
overflow: hidden;
}
99% {
height: 100%;
border-radius: 2px;
overflow: hidden;
}
100% {
height: 100%;
border-radius: 2px;
overflow: auto;
}
}
That will animate on hover, but on mouse out it will just snap back to original state. You can reverse the animation on mouse out but doing so comes with some issues that should be considered. The only way I know to play animation on mouse out with pure css is to add it to the elements default state.
The reverse animation will play on initial page load. The only workarounds I know are javascript based.
The reverse animation will play from its beginning on mouse-out even if the hover anim didn't have time to complete. This can cause a sudden snap if hovered only briefly. I think this can be addressed with css animation-fill-mode: and animation-delay: values, but I have not managed to make it work.
because of the snapping that may happen on very brief hovers, it is better to use a separate anim for mouse-out so the scrollbar doesn't flicker.
.mydiv{
position: absolute;
width: 100%;
bottom: 0;
border-radius: 0 0 2px 2px;
border: solid 1px #eee;
background-color: #fff;
height: 80px;
overflow: hidden;
clear: both;
animation-duration: 0.5s;
animation-name: 'myAnim';
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.mydiv:hover{
animation-duration: 0.5s;
animation-name: 'myAnim';
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#keyframes myAnim {
0% {
height: 80px;
border-radius: 0 0 2px 2px;
overflow: hidden;
}
99% {
height: 100%;
border-radius: 2px;
overflow: hidden;
}
100% {
height: 100%;
border-radius: 2px;
overflow: auto;
}
}
#keyframes myAnimOut {
0% {
height: 100%;
border-radius: 2px;
overflow: hidden;
}
100% {
height: 80px;
border-radius: 0 0 2px 2px;
overflow: hidden;
}
}