css - 悬停时的换行动画（不完整）

Question

我对 css 动画还很陌生。我想产生一种效果，如果我将鼠标悬停在元素上，则线条会从右到左慢慢消失。我已经收集了所有这些，但是当页面加载时效果已经开始。因此，当我将鼠标悬停在它上面时，什么也没有发生，我真的不知道将鼠标悬停在代码中的哪个位置。另外，我如何确保当我不再将鼠标悬停在它上面时，穿过的线会重新填充？

@keyframes subMenu{
 0%   { width : 100; }
 100% { width: 0; }
}
.subMenu {
position: relative;
}
.subMenu:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation-name: subMenu;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards; 
}

提前致谢

Answer 1

我玩弄了你的代码，我想我找到了解决方案。

.subMenu:after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
}
.subMenu:hover:after{
    animation-name: subMenu;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; 
}

这是 CodePen：https ://codepen.io/AjayKudva/pen/WKKxWQ