没有悬停的悬停效果

Question

我想从 links 制作这个悬停效果，让他连续而无需悬停以指示文本是 link 之类的。我有这种效果，当将光标悬停在边框底部时，一些动画会像下划线一样出现，但我想让这种效果始终处于循环状态。有人帮帮我吗？

.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>

Answer 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;
}

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

没有悬停的悬停效果

Hover effect whiout hovering

html

css

animation

effect