没有悬停的悬停效果答案

【问题标题】：Hover effect whiout hovering没有悬停的悬停效果
【发布时间】：2021-11-12 17:45:37
【问题描述】：

我想从链接中制作这种悬停效果，让他在需要悬停的情况下连续显示文本是链接之类的。我有这种效果，当将光标悬停时，一些动画会出现在边框底部，如下划线，但我想让这种效果始终在循环中。有人帮帮我吗？

.efeitosublinhado{
  position:relative;
  text-decoration:none;
}
.efeitosublinhado2{
  position:relative;
  text-decoration:none;
  content:'';
  position:absolute;
  bottom:0;
  right:0;
  width:0;
  height:2px;
  background-color:red;
  transition:width 0.6s cubic-bezier(0.25,1,0.5,1);
  -moz-animation:linky 2s infinite ease-in-out;
  -webkit-animation:linky 2s infinite ease-in-out;
}
@keyframes linky{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
}
@-moz-keyframes linky{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
}
@-webkit-keyframes linky{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
} 
.efeitosublinhado::before{
  content:'';
  position:absolute;
  bottom:0;
  right:0;
  width:0;
  height:2px;
  background-color:Red;
  transition:width 0.6s cubic-bezier(0.25,1,0.5,1);
}
.efeitosublinhado:hover::before{
  background-color:red;
  left:0;
  right:auto;
  width:100%;
}

<a href="WWW.google.pt" class="T3Cefeitosublinhado"> this text will border bottom effect </a>

【问题讨论】：

标签： html css animation effect

【解决方案1】：

尝试在before中设置动画：

.efeitosublinhado{
  position:relative;
  text-decoration:none;
}

@keyframes linky{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
}
@-moz-keyframes linky{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
}
 @-webkit-keyframes linky{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
} 
.efeitosublinhado::before{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:auto;
  width:0;
  height:2px;
  background-color:red;
  transition:width 0.6s cubic-bezier(0.25,1,0.5,1);
  -moz-animation:linky 2s infinite ease-in-out;
  -webkit-animation:linky 2s infinite ease-in-out;
  animation:linky 2s infinite ease-in-out;
}

&lt;a href="WWW.google.pt" class="efeitosublinhado"&gt; this text will border bottom effect &lt;/a&gt;

【讨论】：

非常感谢