悬停在 CSS 上时的文本滑入

Question

我希望当鼠标悬停在the wolf上时，文本Along came滑入。 但the wolf的立场不应改变。Along came应该简单地从左侧滑入和淡入以完成句子。

.main {
width: 100vw;
text-align:center;
}
.addText {
display: none;
color: rgba(255,255,255,0);
transition: .5s;
}
.link:hover .addText {
display: inline;
color: red;
transform: translate(-10px, 00%);
}

<div class="main">
<div class="link">
<span class="addText">Along came </span>
the wolf
</div>
</div>

Answer 1

这里有一个想法，你可以让元素width:0，这样它就不会影响另一个元素：

.main {
text-align:center;
}
.link {
display:inline-block; 
}
.addText {
display:inline-block; /* inline-block so we can set a width */
width:0;
white-space:nowrap; /* keep text one line */
direction:rtl; /* change direction so the text overflow on the left */
color: rgba(255,255,255,0);
transition: .5s;
transform: translateX(20px); /* put the value you want here */
pointer-events:none; /* to avoid the hover on the text, remove to see the difference */
}
.link:hover .addText {
color: red;
transform: translateX(0);
}

<div class="main">
<div class="link">
<span class="addText">Along came </span>
the wolf
</div>
</div>

您也可以只进行翻译，以防您希望文本占用空间：

.main {
text-align:center;
}
.link {
display:inline-block; 
}
.addText {
display:inline-block; 
color: rgba(255,255,255,0);
transition: .5s;
transform: translateX(100%);
}
.link:hover .addText {
color: red;
transform: translateX(0);
}

<div class="main">
<div class="link">
<span class="addText">Along came </span>
the wolf
</div>
</div>