HTML/CSS段落和div

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

那么，我怎样才能解决段落存在的问题，但是不可见和不占用空间（那么它必须在某个时间出现）

编辑：

所以基本上这是div的代码，里面有一个图像（这不是问题） 问题是，这段文字是横向展开的，我不想这样。我希望这段文字总是在图片的右边，而不是水平延伸，有办法吗

---

我想到了一些类似的方法，比如将文本从不透明度为0的div中移出，当div扩展到最大值时使其出现，我想知道是否有另一种方法

我相信我对您的问题有一个答案，下面的内容应该可以满足您的要求

您可以为容器元素设置一个固定的宽度，这样文本就不会超过这个宽度。如果将文本的不透明度设置为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>

.box{宽度：200px；高度：100%；边框：1px实心红色；}
.box p{不透明度：0；}
.box:悬停{动画：expandDiv 2s线性向前；-webkit动画：expandDiv 2s线性向前；}
.box:悬停p{动画：RevelText 2s线性向前；-webkit动画：RevelText 2s线性向前；}
@关键帧expandDiv{
100%{宽度：300px；}
}   
@-webkit关键帧expandDiv{
100%{宽度：300px；}
}
@关键帧revealText{
100%{不透明度：1；}
}   
@-webkit关键帧revealText{
100%{不透明度：1；}
}
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，我们必须尽可能少地进行实验，因为我们的实验室必须在日常消费中进行实验。

---

希望这有帮助

欢迎来到StackOverflow。如果您以前没有使用过该网站，请阅读常见问题解答，但我们需要查看代码或您首先尝试的内容。请提供类似的代码或屏幕截图。您尝试过吗？你失败了吗？分享一些代码，如果是，或者其他，一个屏幕截图/图像解释你试图通过动画实现什么，你是指CSS3动画还是javascript动画？代码，请，我们如何猜测你的代码？stackoverflow的人不是上帝。你怎么能猜出这是没有任何代码的书面答案？我想我理解这个问题，但我可能错了@saugabhattarai

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