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

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/