CSS转换和动画不起作用

我试图实现一个动画，如果用户单击一个标签，（原来隐藏的）div将从上到下打开，如果他们再次单击它，div将从下到上很好地关闭

/*首先，我尝试使用css转换，但它不起作用
因为整个div刚刚打开，没有转换*/
input.trigger+div.mapInfo{
显示：无；/*初始隐藏的div*/
高度：0px；
最大高度：0px；
过渡：所有300毫秒；
}
input.trigger:checked+div.mapInfo{
显示：块；/*显示div*/
高度：自动；
最大高度：500px；
}
/*然后，我尝试使用“最大高度”、“最小高度”和“高度”
但它仍然不起作用*/
input.trigger+div.mapInfo{
显示：无；
最小高度：0px；
最大高度：0px；
过渡：所有300毫秒；
}
input.trigger:checked+div.mapInfo{
显示：块；
最小高度：300px；
最大高度：500px；
高度：自动；
}
/*因此，我删除了转换代码并尝试了css
动画现在div很好地打开，但仍然关闭
没有动画*/
input.trigger+div.mapInfo{
显示：无；
动画：特写300毫秒线性向前；/*这行代码似乎不起作用*/
}
input.trigger:checked+div.mapInfo{
显示：块；
动画：打开300毫秒直线前进；
}
@关键帧特写{
0% {
最大高度：500px；
}
100% {
最大高度：0px；
}
}
@关键帧打开{
0% {
最大高度：0px；
}
100% {
最大高度：500px；
}
}
/*此外，我还尝试使用transform:scaleY（）和
替换“最大高度”，但关闭div仍然没有动画*/
@关键帧特写{
0%{
变换：scaleY（1）
}
100%{
变换：scaleY（0）；
}
}
@关键帧打开{
0%{
变换：scaleY（0）；
}
100%{
变换：scaleY（1）；
}
}

剑滩
宝剑是诺曼底入侵的最东端登陆点。剑被分为几个部分，每个部分分为海滩。这把剑距离卡昂大约9英里，卡昂是第三步兵师的目标

刀剑登陆的伤亡人数不多，但其内陆路线交通拥堵，限制了入侵的有效性。剑锋部队经历了D日唯一的装甲反击，由第21装甲师发起

我不确定这是否是您想要做的。但是我只是改变了过渡，而不是显示，我改变了文本的颜色。如果要添加图像，还可以使用可见性。根据W3schools.com，显示属性不可设置动画。这就是为什么当您取消选中该框时，它会立即转到无过渡效果的

display:none

input.trigger+div.mapInfo{
显示：隐藏；/*最初隐藏的div*/
颜色：rgba（0,0,0,0）；
高度：0px；
溢出：隐藏；
过渡：1s；
}
input.trigger:checked+div.mapInfo{
显示：块；/*显示div*/
颜色：rgba（0,0,0,1）；
高度：500px；
过渡：1s；
}

剑滩
宝剑是诺曼底入侵的最东端登陆点。剑被分为几个部分，每个部分分为海滩。这把剑距离卡昂大约9英里，卡昂是第三步兵师的目标

刀剑登陆的伤亡人数不多，但其内陆路线交通拥堵，限制了入侵的有效性。剑锋部队经历了D日唯一的装甲反击，由第21装甲师发起

要让它工作，最起码要做的就是改变高度。请确保还将“溢出”设置为“隐藏”

/*首先，我尝试使用css转换，但它不起作用
因为整个div刚刚打开，没有转换*/
.mapInfo{
高度：0px；
溢出：隐藏；
过渡段：高度300ms；
}
.trigger:已选中~.mapInfo{
高度：500px；
}

剑滩
宝剑是诺曼底入侵的最东端登陆点。剑被分为几个部分，每个部分分为海滩。这把剑距离卡昂大约9英里，卡昂是第三步兵师的目标

刀剑登陆的伤亡人数不多，但其内陆路线交通拥堵，限制了入侵的有效性。剑锋部队经历了D日唯一的装甲反击，由第21装甲师发起

你介意使用JS吗？还是你开始使用CSS了？@jacc\u 01 JS很难理解/让人困惑？现在我知道了一些js的基础知识，比如变量数据类型循环，函数我注意到你的问题是让div从上到下打开，但是你尝试的代码是从下到上打开的。自上而下要容易得多，提供的两个答案都已经让您能够做到这一点。如果你真的想自下而上，那么你需要JavaScript。非常感谢你！修改你的代码后，我设法得到我想要的！！