悬停时的直线动画（不完整）

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

悬停时的直线动画（不完整）

Line-through animation on hover (incomplete)

css

animation

effects

hover

line-through