悬停时的边框动画，透明部分从左向右移动

Question

我有这段代码试图在悬停时制作动画。像这样：

TextLink      hover: TextLink
--------             --  ----

我正在尝试让“透明”部分看起来像是从 左侧移动到文本 末尾的动画。

body {
  margin: 0;
  background: #16263d;
}

div {
  padding: 30px;
}

a {
  color: #fff;
  text-decoration: none;
  display: block;
  margin-top: 24px;
  transition: all 0.75s ease-in-out;
}

a span {
  border-bottom: 2px solid #fff;
}

a:hover:after {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  transform: translateX(100%);
}

a:after {
  content: '';
  width: 35px;
  height: 2px;
  background: #16263d;
  display: block;
  position: relative;
  opacity: 1;
  transform: translateX(-35px);
  transition: all 0.75s ease-in-out;
}

<div>
  <a href="#"><span>Text Link and something more than this</span></a>
</div>

问题是没有考虑到 100% 的转换过渡...似乎只有 100px 是。

Answer 1

尝试使用渐变：

span {
 --g:40px; /* the gap */

 font-size:40px;
 background:
   linear-gradient(90deg,
      black   calc(50% - var(--g)/2),
      #0000 0 calc(50% + var(--g)/2), 
      black 0
   ) right bottom/calc(200% + var(--g)) 3px /* 3px = thickness */
   no-repeat;
}

span:hover {
  background-position: left bottom;
  transition:0.5s;
}

<span>Some text</span>

Answer 2

首先，您需要了解变换的百分比值是元素边界框（大小）的一部分，而不是父元素的一部分。
由于伪元素的宽度为 35px，因此转换将其移动了 35px。 (see MDN for more info)

也就是说，您可以在伪元素上为“透明”部分使用边框，如下所示：

body {
  background: #16263d;
}

a {
  font-size:20px;
  position:relative;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding:.2em 0;
  border-bottom: 2px solid #fff;
}
a:after {
  content: '';
  position:absolute;
  bottom:-2px;
  right:100%;
  width:100%;
  height: 2px;
  border-right: 35px solid #16263d;
  transition: transform 0.75s ease-in-out;
}

a:hover:after {
  transform: translateX(100%);
}

<a href="#">Text Link and something more than this</a>

悬停时的边框动画，透明部分从左向右移动

Border animation on hover with a transparent section moving left to right

css

animation

css-transitions

border