CSS animation, play and then reverse animation on hover - html

Question

I have multiple divs zero width on page load, they are then extended (just after page load) by a keyframe transition like so (for example). Each of these divs has a different final width.
#keyframes growN {
from {width: 0px;}
to {width: 21vw;}
}
I would like to add a second animation that extends the div further (to a fixed value) on hover, and sets it back to its original (post page load animation) width on de-hover (un-hover?). Something like this:
#keyframes hover_grow {
from {width: element.width;}
to {width: 50vw;}
}
Since there are many divs, I'd rather not do the maths myself (separate animation for each div, with its own width in place of element.width).
I have tried the following:
bar:hover {
-webkit-animation-name: hover_grow;
-webkit-animation-duration: 0.1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-direction: alternate;
animation-name: grow;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-direction: alternate;
}
#-webkit-keyframes hover_grow {
from {width: initial;}
to {width: 25vw;}
}
#keyframes hover_grow {
from {width: initial;}
to {width: 25vw;}
}
This works on hover - the div extends further, but on de-hover, it returns it to its page load, pre animation value (i.e. 0), and its page load animation triggers again. Also, the timing seems to be ignored.
JSFiddle: https://jsfiddle.net/an1o4brL/3/

Answer 1

one way to work this around is to use a wrapper, animate the initial appearance then grow and shrink the wrapper on hover, the child will follow its parent's width,
other wise use js
#bar4 {
height: 30px;
transition: width .5s linear;
display: block;
animation-name: grow4;
animation-duration: .5s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
background-color: white;
border: 2px solid #5e0734;
margin-top: 0.15vh;
margin-bottom: 0.15vh;
margin-left: 0.5vh;
overflow: hidden;
}
#keyframes grow4 {
from {
width: 0;
}
to {
width: 100%;
}
}
#bar4Wrap {
width: 21vw;
transition: width .5s linear;
}
#bar4Wrap:hover {
width: 100%;
}
<div id="bar4Wrap">
Link
</div>