Css Don'；不要让：after动画规则在页面加载时触发

我有下面的代码，它几乎完成了我需要它做的所有事情

。鼠标{
边缘底部：20px；
填充物：5px；
溢出：隐藏；
宽度：200px；
}
老鼠：之后{
内容：“；
高度：2倍；
显示：块；
背景：红色；
边缘顶部：5px；
转化：translateX（100%）；
动画：悬停1.5s轻松1；
}
.鼠标：悬停：之后{
动画：悬停1.5s轻松1；
}
@关键帧悬停{
0%{transform:translateX（0%）；}
100%{transform:translateX（100%）；}
}
@关键帧悬停{
0%{transform:translateX（-100%）；}
100%{transform:translateX（0%）；}
}

---

观看下面的一行，而不是使用
动画
使用带有属性和值
scaleX

这里的“窍门”是改变
悬停
状态

基本上你是这样做的：

.mouse:after {
  content: "";
  transform: scaleX(0);
  transition: transform 1.5s ease;
  transform-origin: right;
}
.mouse:hover:after {
  transform: scaleX(1);
  transform-origin: left;
}


代码片段：


。鼠标{
边缘底部：20px；
填充物：5px；
溢出：隐藏；
宽度：200px；
}
老鼠：之后{
内容：“；
高度：2倍；
显示：块；
背景：红色；
边缘顶部：5px；
变换：scaleX（0）；
转型：转型1.5s轻松；
变换原点：右；
}
.鼠标：悬停：之后{
变换：scaleX（1）；
变换原点：左；
}
观察下面的行
当元素可见时，动画始终运行。（或页面加载）

对于这种情况，您需要使用过渡。更加精简。

这是使用转换的代码


。鼠标{
边缘底部：20px；
填充物：5px；
溢出：隐藏；
宽度：200px；
}
老鼠：之后{
内容：“；
高度：2倍；
显示：块；
背景：红色；
边缘顶部：5px；
转变：转变1s；
转化：translateX（100%）；
}
.鼠标：悬停：之后{
转化：translateX（-100%）；
}

注意下面的线