Html 链接悬停动画问题（骑士动画）

我已经创建了悬停在链接上运行的动画

我已经使用输入和输出关键帧创建了动画

但我有个问题。我认为这是因为《骑士出击》的动画。但我需要这个来离开

问题在于页面加载时它会自动运行。密码笔

.container{
填充：50px；
最大宽度：500px；
}
达什巴顿先生{
左侧填充：0px；
位置：相对位置；
垫底：15px；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
-ms转换：均为0.3s；
-o-过渡：均为0.3s；
过渡：均为0.3秒；
颜色：黑色；
文字装饰：无；
}
.达什巴顿：之后{
位置：绝对位置；
内容：“；
底部：0px；
宽度：30px；
背景色：黑色；
高度：4px；
左：0；
右：自动；
-webkit动画：骑士出局0.5s；
动画：骑士出局0.5s；
动画填充模式：正向；
}
.dashBottom:悬停：之后{
-webkit动画：0.5s中的骑士；
动画：骑士在0.5s；
动画填充模式：正向；
}
@关键帧中的骑士{
从{
左：0px；
宽度：30px；
}
50% {
左：0px；
宽度：100%；
}
到{
左：计算（100%-30px）；
宽度：30px；
}
}
@关键帧骑士了{
从{
左：计算（100%-30px）；
宽度：30px；
}
50% {
左：0px；
宽度：100%；
}
到{
左：0px；
宽度：30px；
}
}

为了避免这种情况，你可以考虑转换。以下是另一种用更少的代码实现相同效果的方法：


.container{
填充：50px；
最大宽度：500px；
}
达什巴顿先生{
左侧填充：0px；
位置：相对位置；
垫底：15px；
过渡：均为0.3秒；
颜色：黑色；
文字装饰：无；
背景图像：线性梯度（#000，#000）；
背景尺寸：200%4px；
背景位置：calc（200%+30px）100%；
背景重复：无重复；
过渡：0.5s全部；
}
.dashBottom:悬停{
背景位置：钙（-100%-30px）100%；
}

为了避免这种情况，你可以考虑转换。以下是另一种用更少的代码实现相同效果的方法：


.container{
填充：50px；
最大宽度：500px；
}
达什巴顿先生{
左侧填充：0px；
位置：相对位置；
垫底：15px；
过渡：均为0.3秒；
颜色：黑色；
文字装饰：无；
背景图像：线性梯度（#000，#000）；
背景尺寸：200%4px；
背景位置：calc（200%+30px）100%；
背景重复：无重复；
过渡：0.5s全部；
}
.dashBottom:悬停{
背景位置：钙（-100%-30px）100%；
}

@Temin感谢您的反馈。我已经加上了。但我希望鼠标左键也有同样的效果，你是说永久效果？像这样：？我只是想要鼠标悬停的效果，看起来像骑士波。你能帮帮我吗。你是说你想在穆斯离开时动画反转？是的，这就是我想要的。@Temin谢谢你的反馈。我已经加上了。但我希望鼠标左键也有同样的效果，你是说永久效果？像这样：？我只是想要鼠标悬停的效果，看起来像骑士波。你能帮我吗。你是说你想在鼠标离开时动画反转？是的，这就是我想要的。但是我需要黑色线宽来确定值（精确30px）。但是我需要黑色线宽来确定值（精确30px）。