CSS transition - only working in one direction, needs to be both - css

Question

I have a CSS transition which takes place on hover of a link - the transition happens to some of the contents of this link.
My issue is that the transition (which primarily animates width and height properties) works fine when hovering over the link, but on stopping hover, the elements simply spring back to their unhovered state - rather than transitioning.
The styles defined are this:
a.transition {
display: block;
width: 300px;
height: 200px;
position: relative;
border: 1px solid #000;
color: #000'
}
a.transition .category_info_container {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 70px;
transition: height 0.5s, width 0.5s, color 0.5s;
}
a.transition .category_info_container .category_info {
background-color: #aaa;
padding: 0 20px;
}
a.transition .category_info_container .category_info .category_name {
color: #fff;
text-transform: uppercase;
font-size: 18px;
line-height: 70px;
}
a.transition .category_info_container .category_info .category_desc {
display: none;
}
a.transition:hover .category_info_container {
background: #eee;
width: 48%;
height: 100%;
}
a.transition:hover .category_info_container .category_info {
position: absolute;
bottom: 20%;
background: none;
}
a.transition:hover .category_info_container .category_info .category_name {
color: #000;
line-height: 50px;
}
a.transition:hover .category_info_container .category_info .category_desc {
display: block;
}
And my markup:
<a href="#" class="transition">
<div class="category_info_container">
<div class="category_info">
<div class="category_name">
Test Name
</div>
<div class="category_desc">
Lorem ipsum dolar sit amet...
</div>
</div>
</div>
</a>
I have created a JSFiddle with my code.

Answer 1

I think, It will be better, if you use different blocks for elements:
checkout my example:
http://jsfiddle.net/bo5o3q18/3/
<a href="#" class="transition">
<div class="category_info">
<div class="category_name">
Test Name
</div>
</div>
<div class="category_info-add">
<div class="category_name">
Test Name
</div>
<div class="category_desc">
Lorem ipsum dolar sit amet...
</div>
</div>
</a>