从左向右淡入文本，反之亦然

Question

我需要知道如何使文本随着div floating_mask的增长而出现。现在，在增加div的同时，文本被放在两行中，当翻译结束时，如果div保持原样，它已经达到100%。

.floating {
display: flex;
align-items: center;
padding: 4px;
justify-content: flex-start;
}
.container {
z-index: 1;
margin-left: 60px;
margin-right: 20px;
}
.mask {
overflow: hidden;
position: relative;
border: 1px solid lightgrey;
height: 54px;
width: 54px;
transition: width 1s;
display: flex;
align-items: center;
transform: translateX(2px);
}

.button:hover + .mask{
width: 200px;
}
.button {
position: absolute;
border: 1px solid lightgrey;
border-radius: 50%;
background-color: white;
padding: 12px;
z-index: 2;
top:17px;
left:17px;
}
}

<div class="floating">
<button type="button"  class="button ">
Icon
</button>
<div class="mask">
<div class="container">
<p style="margin: 0;font-size:14px">Message group</p>
<p style="margin: 0;font-size:14px">Message group</p>
</div>
</div>
</div>

Answer 1

简单的方法是在单词之间使用 。

.floating {
display: flex;
align-items: center;
padding: 4px;
justify-content: flex-start;
}
.container {
z-index: 1;
margin-left: 60px;
margin-right: 20px;
}
.mask {
overflow: hidden;
position: relative;
border: 1px solid lightgrey;
height: 54px;
width: 54px;
transition: width 1s;
display: flex;
align-items: center;
transform: translateX(2px);
}

.button:hover + .mask{
width: 200px;
}
.button {
position: absolute;
border: 1px solid lightgrey;
border-radius: 50%;
background-color: white;
padding: 12px;
z-index: 2;
top:17px;
left:17px;
}
}

<div class="floating">
<button type="button"  class="button ">
Icon
</button>
<div class="mask">
<div class="container">
<p style="margin: 0;font-size:14px">Message&nbsp;group</p>
<p style="margin: 0;font-size:14px">Message&nbsp;group</p>
</div>
</div>
</div>

Answer 2

试试这个css：

.container {
z-index: 1;
margin-left: 60px;
margin-right: 20px;
position: absolute;
white-space: nowrap;
animation: floatText 5s infinite alternate ease-in-out;
}

这是小提琴：https://jsfiddle.net/15n3quaL/