Html CSS动画，播放，然后在悬停时反转动画

我在页面加载时有多个div零宽度，然后它们（在页面加载之后）通过这样的关键帧转换进行扩展（例如）。每个div都有不同的最终宽度

@keyframes growN {
    from {width: 0px;}
    to {width: 21vw;}
}

我想添加第二个动画，在悬停时进一步扩展div（到固定值），并在解除悬停（取消悬停？）时将其设置回其原始（页面加载动画后）宽度。大概是这样的：

@keyframes hover_grow {
    from {width: element.width;}
    to {width: 50vw;}
}

因为有很多div，我不想自己做数学（每个div都有单独的动画，用自己的宽度代替element.width）

我尝试了以下方法：

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;}
}

这适用于悬停-div进一步扩展，但在解除悬停时，它会将其返回到页面加载、动画前值（即0），并再次触发页面加载动画。而且，时间似乎被忽略了

---

jshiddle:

解决这个问题的一种方法是使用包装，设置初始外观的动画，然后在悬停时增长和收缩包装，子对象将跟随其父对象的宽度

其他明智的使用

js

#bar4{
高度：30px；
过渡：宽度。5s线性；
显示：块；
动画名称：grow4；
动画持续时间：.5s；
动画计时功能：放松；
动画迭代次数：1；
背景色：白色；
边框：2px实心#5e0734；
边际上限：0.15vh；
边缘底部：0.15vh；
左边距：0.5vh；
溢出：隐藏；
}
@关键帧增长4{
从{
宽度：0；
}
到{
宽度：100%；
}
}
#包条{
宽度：21vw；
过渡：宽度。5s线性；
}
#bar4Wrap：悬停{
宽度：100%；
}