从底部过渡到顶部的HTML文本

Question

我现在正在尝试创建一个HTML div，当将文本添加到其内部HTML时向上过渡。我不知道如何正确解释我想要的内容，但是我会尽力的。

假设您使用的代码编辑器具有实时更新的实时预览，并且您输入了类似<div></div>的代码，然后将代码更改为<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>，然后进行了更改预览更新的代码如下：

这就是我想要像上面的图片一样向上过渡的文本。

Here是文本从底部过渡到顶部而不是默认出现的另一个示例。

希望您已经理解了，谢谢。

这是我的代码live.

Answer 1

尝试使用[div：empty {transition：（all）970ms easy-in-out}]，看看是否可行