I'm trying to create a smooth linear transition on the height of a box with CSS, but it's not working as expected. Currently, the transition is abrupt - the height suddenly increases and then the margins take up all the time. Can someone provide me with a solution to fix this issue?
.resource .resource-item-list .resource-item{
max-height: 0px;
overflow: hidden;
-webkit-transition: all 3s linear;
transition: all 3s linear;
}
.resource .resource-item-list .resource-item.open{
width: 100%;
height: auto;
max-height: 10000px;
margin-bottom: 30px;
margin-top: 20px;
background-color: red
overflow: hidden;
display: block;
}