Html 动画div高度扩展起伏

我试图创建一个div，它在导航栏下面展开，在它展开时将主要内容推到导航栏下面。然而，由于某些原因，这对关键帧不起作用，而我不能对转换起作用，因为它必须在页面加载时发生

以下是我得到的：

.c-lander{
动画名称：c-lander-intro；
动画持续时间：900ms；
动画计时功能：放松；
动画迭代次数：无限；
}
@关键帧c-着陆器-介绍{
0% {
高度：0px；
}
100% {
身高：继承；
}
}
c-着陆器{
填充顶部：15px；
填充底部：30px；
背景：#01C9B6；
溢出：隐藏；
}

这里有一些非常有文本性的文本，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度
以下是推送的内容

您必须为其提供一个动画单元，

继承

无法正常工作：

@keyframes c-lander-intro {
    0% {
        height: 0px;
    }
    100% {
        height: 100px;
    }
}

注意：您必须添加浏览器前缀才能在所有浏览器中使用

.c-lander{
动画名称：c-lander-intro；
动画持续时间：900ms；
动画计时功能：放松；
动画迭代次数：1；
}
@关键帧c-着陆器-介绍{
0% {
高度：0px；
}
100% {
高度：100px；
}
}
c-着陆器{
填充顶部：15px；
填充底部：30px；
背景：#01C9B6；
溢出：隐藏；
}

这里有一些非常有文本性的文本，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度
以下是推送的内容

您无法将高度设置为

自动

（此

继承

解析为什么）。另一种方法是使用设定值设置

最大高度

的动画

.c-lander{
动画名称：c-lander-intro；
动画持续时间：900ms；
动画计时功能：放松；
动画迭代次数：无限；
}
@关键帧c-着陆器-介绍{
0% {
最大高度：0px；
}
100% {
最大高度：300px；
}
}
c-着陆器{
填充顶部：15px；
填充底部：30px；
背景：#01C9B6；
溢出：隐藏；
}

这里有一些非常有文本性的文本，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度。这里有一些文本非常简练，应该用来演示并给这个div一个高度
这是推送的内容

div的高度随页面而异，因此我可以使用什么来代替继承？谢谢！正是我需要的！唯一的问题是，过多的“最大高度”会使动画在速度和轻松性方面不准确。@SebastianOlsen如果你想让它完美，你可能必须使用js。这与CSS:d中正确的内容一样好。这是一件你必须相应地调整的事情，或者只是预测将要发生的事情，特别是对于那些特别小的块。如果你的内容在大小上非常多样化，我强烈推荐一些最小的javascript来适应。看看这个[]，它不完整，但可能指向正确的方向