display: block не анимируется.
Вот
здесь есть ссылка на список свойств, которые можно анимировать. Если на пальцах, то анимируются те свойства, где и начальное состояние и конечное представлено числами, причем одного типа.
То есть:
height: 0%; ---> height: 100%; - получится.
display: none; ---> display: block; - не получится.
height: 10%; ---> height: 100px; - не получится, потому что сперва %, потом px.
В общем используйте height: 0 вместо display: none;
UPD:
В вашем случае, если вы не можете четко прописать высоту блока в css, вы не сможете анимировать height от 0 до auto;
Но есть хак, можно менять max-height от 0 до 500px, например.
https://jsfiddle.net/1xx87rg9/4/ 
