如何在悬停时放慢文字速度？

I'm trying to make a button where a text appears before another text only on hover. I achieved that but can't put any delay on it.

我正在尝试创建一个按钮,其中文本仅在悬停时出现在另一个文本之前。我实现了这一点,但不能拖延它。

See how fast the word "let's" appears. Need to slow that down.

看看“let's”这个词的出现速度有多快。需要放慢速度。

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

I tried to use this answer switching out link text on hover - transition, but it is actually replacing the original text no?

我尝试使用这个答案切换悬停上的链接文本 - 转换,但它实际上是替换原始文本没有?

3 个解决方案

#1

You can make the text present initially and create a transition of width for example:

您可以最初生成文本并创建宽度过渡,例如:

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

#2

Try to use transition-delay with 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>

#3

you can achieve that by adding a delay to the transition?

你可以通过增加过渡延迟来实现这一目标吗?

.btn {
    transition-delay: 2s;
}

#1