HTML/CSS 段落和 div

Question

我的 div 和里面的段落有问题 我想做的是让 div 有一个宽度动画（在 2 秒内从 0% 到 80%），我唯一的问题是在 div 里面有一段写着一些句子的段落；这会导致 div 在水平方向上太大（它确实有背景颜色，但我必须用图像更改它）。

那么，我该如何解决段落存在但不可见且不占用空间的问题（然后它必须在某个时间出现）？

编辑：

div.pick
{
height:30%;
overflow:hidden;
animation: example 2s;
}
@keyframes example
{
0%
{
width:0%;
}
100%
{
width:80%;
}

所以基本上这是 div 的代码，里面有一个图像（这不是问题） 问题是所写的段落横向扩展，我不希望那样。我希望段落始终位于图像的右侧而不是水平扩展，有没有办法？

我想到了一些方法，比如让不透明度为 0 的 div 中的文本出现，当 div 扩展到最大使其出现时，我想知道是否还有其他方法

Answer 1

我相信我已经回答了您的问题，以下内容应该适用于您想要实现的目标。

你可以为你的容器元素设置一个固定的宽度，这样文本就不会超过这个值。如果您将文本的不透明度设置为 0，并在动画完成后将其更改为 1，则文本将逐渐显示到您输入的动画时间。

            <style>

            .box { width:200px; height:100%; border:1px solid red; }
            .box p { opacity:0; }
            .box:hover { animation:expandDiv 2s linear forwards; -webkit-animation:expandDiv 2s linear forwards; }
            .box:hover p { animation:revealText 2s linear forwards; -webkit-animation:revealText 2s linear forwards; }

            @keyframes expandDiv { 
                100% { width:300px; }   
            }   

            @-webkit-keyframes expandDiv { 
                100% { width:300px; }   
            }

            @keyframes revealText {
                100% { opacity:1; }     
            }   

            @-webkit-keyframes revealText { 
                100% { opacity:1; } 
            }

            </style>    


            <div class="box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>  
            </div>

希望这会有所帮助！