仅使用CSS为超链接下的一行制作动画

Question

我正在尝试使用以下代码结构在超链接下以特定方式动画化一行(请参见以下gif以获得视觉表示(：

.navlink {
position: relative;
color: white;
}
.navlink a {
display: inline-block;
margin: 0;
text-decoration: none;
}
.navlink a::after {
display: block;
content: '';
border-bottom: solid 0.2vmax red;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
.navlink a:hover::after {
animation: scaleup 3s forwards;
}
@keyframes scaleup {
50% {
transform: scaleX(1)
}
100% {
transform-origin: 50% 0, scaleX(0)
}
}
.navlink a:after {
transform-origin: 0% 50%;
}

<nav id="main-nav">
<div class="main-nav-content">
<div class="navlink">
<a href="/aboutus.html">
<span>About Us</span>
</a>
</div>
</div>
</nav>

我可以让这条线在一个方向上设置动画，可以，但在动画的后半部分有问题。有人能帮我理解一种只使用CSS的更好方法吗？

Answer 1

您可以使用translateX来完成此操作，因此不需要切换transform-origin:

.navlink {
position: relative;
color: white;
}
.navlink a {
display: inline-block;
margin: 0;
overflow: hidden;
text-decoration: none;
}
.navlink a:after {
display: block;
content: '';
border-bottom: solid 0.2vmax;
transform: translate(-110%);
transition: transform 250ms ease-in-out;
}
.navlink a:hover:after {
animation: scaleup 3s forwards;
}
@keyframes scaleup {
50% {
transform: translate(110%)
}
}
.navlink a:after {
transform-origin: 0% 50%;
}

<nav id="main-nav">
<div class="main-nav-content">
<div class="navlink">
<a href="/aboutus.html">
<span>About Us</span>
</a>
</div>
</div>
</nav>

Answer 2

使用不同的方法，父元素宽度的伪元素从左到右和从后浮动

.navlink {
position: relative;
color: white;
}
.navlink a {
display: inline-block;
margin: 0;
text-decoration: none;
position: relative;
overflow: hidden;
padding-bottom: 5px;
}
.navlink span::after {
position: absolute;
left: -100%;
display: block;
content: ' ';
border-bottom: solid 0.2vmax red;
height: 2px;
width: 100%;
transition: left 500ms linear;
left: -100%;
}
.navlink a:hover span::after {
transition: left 500ms linear;
left: 100%;
}

<nav id="main-nav">
<div class="main-nav-content">
<div class="navlink">
<a href="/aboutus.html">
<span>About Us</span>
</a>
</div>
</div>
</nav>