KaistonGage

I'm trying to figure out how to do a simple animation. I have a box with some text content, the idea is that the box only shows an h2 element until the user mouses over it, then it reveals the paragraph element. I got the text to hide and reveal properly, and the box expands like I want it to but there is no animation, the box just pops out. The animation works fine if I set the hight and width properties to a solid pixel amount, but using auto breaks the animation. Sorry if I'm explaining this poorly, I'm trying to relearn CSS after years of being out of practice. Any way to fix this?
.info-box {
width: 360px;
height: 100px;
background-color: white;
padding-left: 15px;
padding-top: 1px;
margin: 10px;
margin-top:20px;
overflow: hidden;
box-shadow: 0 7px 15px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.info-box:hover {
animation-name: expand;
animation-duration: 0.5s;
animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

        @keyframes expand {
            0% {
                width: 360px;
                height: 100px;
            }
            100% {
                height: auto;
                width: auto;
            }