如何在悬停时减慢文本播放速度？

Question

我正在尝试制作一个按钮，其中文本仅在悬停时出现在另一个文本之前。我做到了这一点，但不能拖延。

看看“让我们”这个词出现的速度有多快。需要放慢速度。

.btn {
  width: 100px;
  height: 100px;
  border: none;
  background-color: mediumseagreen;
  transition: width 0.5s ease;
}

.btn:hover {
  width: 200px;
}

.btn:hover::before {
  content: "Let's ";
}

<button class="btn">
Go
</button>

我尝试使用此答案在悬停 - 转换上切换链接文本，但它实际上正在替换原始文本，不是吗？

Answer 1

您可以使文本最初呈现并创建宽度过渡，例如：

.btn {
  width: 100px;
  height: 100px;
  border: none;
  background-color: mediumseagreen;
  transition: width 0.5s ease;
}

.btn:hover {
  width: 200px;
}

.btn::before {
  display:inline-block;
  vertical-align:text-bottom;
  content: "Let's ";
  max-width:0px;
  white-space:nowrap;
  overflow:hidden;
  transition:1s;
}
.btn:hover::before {
  max-width:50px;
}

<button class="btn">
Go
</button>

Answer 2

尝试transition-delay与opacity

.btn {
  width: 100px;
  height: 100px;
  border: none;
  background-color: mediumseagreen;
  transition: width 0.5s ease;
}

.btn:hover {
  width: 200px;
}

.btn::before {
  opacity: 0;
  content: "Let's ";
  transition: all .3s linear 0s;
  position: absolute;
  transform: translateX(-110%);
}

.btn:hover::before {
  transition: all .5s linear .3s;
  opacity: 1;
}

<button class="btn">Go</button>