Html 将鼠标悬停在鼠标上时显示Css动画

我想展示一个画一条有角度的直线的动画，并在鼠标悬停在按钮上时从左到右显示我的文本，这方面我是个新手。还有一种方法可以让我的文字在动画结束后保留而不消失吗

这是我的代码，代码是来自堆栈溢出的其他答案的组合

.skew{
位置：相对位置；
利润率：100像素；
宽度：0；
高度：2倍；
背景：#f00；
变换原点：0.100%；
变换：旋转（-45度）；
动画：绘制0.5s线性；
动画填充模式：正向；
}
.线路{
位置：绝对位置；
左：100%；
排名：0；
内容：''；
宽度：0；
高度：2倍；
背景：#f00；
变换原点：0.100%；
变换：旋转（45度）；
动画：抽绳0.7s线性；
动画延迟：0.5s；
动画填充模式：正向；
}
.showText{
动画：showtext2s；
位置：相对位置；
顶部：-17px；
左：15px；
不透明度：0；
}
@关键帧显示文本{
0% {
不透明度：0；
转换：translateX（-20px）；
}
50% {
不透明度：0；
}
100% {
不透明度：1；
变换：translateX（0）；
}
}
@关键帧绘制{
0% {
宽度：0px；
}
100% {
宽度：100px；
}
}
@关键帧抽绳{
0% {
宽度：0px；
}
100% {
宽度：100px；
}
}

在我上空盘旋
菜单项

您需要使用Javascript在

div.skew

元素上添加/切换一个类，并在该类或该类元素的子元素上定义

动画

规则，如下所示：

var-button=document.querySelector（“button.menubtn”）//选择按钮
var skewElement=document.querySelector（“div.skew”）//选择“skew”元素
button.onmouseover=函数（）{
skewElement.classList.toggle（“startAnimation”）；
}

.skew{
位置：相对位置；
利润率：100像素；
宽度：0；
高度：2倍；
背景：#f00；
变换原点：0.100%；
变换：旋转（-45度）；
}
.歪斜{
动画：绘制0.5s线性；
动画填充模式：正向；
}
.线路{
位置：绝对位置；
左：100%；
排名：0；
内容：''；
宽度：0；
高度：2倍；
背景：#f00；
变换原点：0.100%；
变换：旋转（45度）；
}
.startAnimation.电话线{
动画：抽绳0.7s线性；
动画延迟：0.5s；
动画填充模式：正向；
}
.showText{
不透明度：0；
位置：相对位置；
顶部：-17px；
左：15px；
}
.startAnimation.showText{
动画：showtext2s；
动画填充模式：正向；
}
@关键帧显示文本{
0% {
不透明度：0；
转换：translateX（-20px）；
}
50% {
不透明度：0；
}
100% {
不透明度：1；
变换：translateX（0）；
}
}
@关键帧绘制{
0% {
宽度：0px；
}
100% {
宽度：100px；
}
}
@关键帧抽绳{
0% {
宽度：0px；
}
100% {
宽度：100px；
}
}

在我上空盘旋
菜单项

要在悬停时完成动画，首先我们必须使用javascript为该特定元素创建悬停事件

然后在触发该事件时调用函数，它将为您显示一些动画

为了简单起见，我只是为整个动画元素创建了一个父div，而不是最初显示

稍后悬停，我们将父元素的css display属性更改为

block

，它将显示所有动画元素

此外，为了确保文本在动画之后保持不变，还有一个名为“向前”（forwards）的动画属性，它将在以后保留最终动画状态

var hvrbtn=document.getElementById（“hvrbtn”）；
hvrbtn.onmouseover=（）=>{
var anim=document.getElementById（“anim”）；
anim.style.display=“block”；
};
。动画{
显示：无；
}
.歪斜{
位置：相对位置；
利润率：100像素；
宽度：0；
高度：2倍；
背景：#f00；
变换原点：0.100%；
变换：旋转（-45度）；
动画：绘制0.5s线性；
动画填充模式：正向；
}
.线路{
位置：绝对位置；
左：100%；
排名：0；
内容：''；
宽度：0；
高度：2倍；
背景：#f00；
变换原点：0.100%；
变换：旋转（45度）；
动画：抽绳0.7s线性；
动画延迟：0.5s；
动画填充模式：正向；
}
.showText{
动画：向前显示文本；
位置：相对位置；
顶部：-17px；
左：15px；
不透明度：0；
}
@关键帧显示文本{
0% {
不透明度：0；
转换：translateX（-20px）；
}
50% {
不透明度：0；
}
100% {
不透明度：1；
变换：translateX（0）；
}
}
@关键帧绘制{
0% {
宽度：0px；
}
100% {
宽度：100px；
}
}
@关键帧抽绳{
0% {
宽度：0px；
}
100% {
宽度：100px；
}
}

在我上空盘旋
菜单项
为此，您需要编写一个脚本function@FarnazDaneshvar如果这解决了你的问题，请考虑将它标记为“接受”，点击这个答案下面的箭头按钮！谢谢