CSS div within div Transition not working - css

Question

Good morning, I have a Div within a Div, the child div is hidden, but displays when the mother div is hovered. I need this display to be transitioned, but when I try this with Display or Visibility, its not working. I've created a fiddle here with sample code:
https://jsfiddle.net/eggb4zra/
.vocabTitle
{
text-align:left;
background:linear-gradient(#ffffcc, #ffffcc, white, lightblue);
padding:3px;
padding-bottom;2px;
border:2px solid black;
border-radius:15%;
cursor:pointer;
transition: all 2s;
}
.highlightClass
{
background-color:pink;
}
.hiddenMeaning
{
visibility:hidden;
display:none;
}
.vocabTitle:hover .hiddenMeaning
{
visibility:visible;
display:block;
}
You can see the display works on hover, but not transitioned. Any help appreciated.

Answer 1

Transition for display: none to display: block will not work in CSS since none value removes the element as if it is not there in the page.
Try transition of height* from 0 to say 20px. Set overflow: hidden to the div to be hidden initially.
*Since you need to use dynamic height, you can make use of max-height instead of height
Updated JSfiddle
.vocabTitle {
text-align: left;
background: linear-gradient(#ffffcc, #ffffcc, white, lightblue);
padding: 3px;
padding-bottom;
2px;
border: 2px solid black;
border-radius: 15%;
cursor: pointer;
transition: all 2s;
}
.highlightClass {
background-color: pink;
}
.hiddenMeaning {
transition: all 2s;
max-height: 0;
overflow: hidden;
}
.vocabTitle:hover .hiddenMeaning {
max-height: 100px;
}
<!-- Left bar -->
<div class="kanjiVocab">
<p>Kanji and Vocabulary listed below:</p>
<div class='vocabTitle'>風邪 (かぜ ふうじゃ )
<div class='hiddenMeaning'>common cold cold influenza flu ague</div>
</div>
<br>
<div class='vocabTitle'>気味 (きみ きび )
<div class='hiddenMeaning'>sensation feeling tendency propensity</div>
</div>
<br>
<div class='vocabTitle'>熱 (ねつ )
<div class='hiddenMeaning'>heat fever temperature zeal passion enthusiasm mania craze rage</div>
</div>
<br>
<div class='vocabTitle'>季節(きせつ)
<div class='hiddenMeaning'>Season</div>
</div>
<br>
<div class='vocabTitle'>風邪 (かぜ ふうじゃ )
<div class='hiddenMeaning'>common cold cold influenza flu ague</div>
</div>
<br>
<div class='vocabTitle'>引き (ひき )
<div class='hiddenMeaning'>pull patronage influence tug discount</div>
</div>
<br>
<div class='vocabTitle'>で (で )
<div class='hiddenMeaning'>indicates location of action at in indicates time of action indicates means of action cause of effect by and then so indicates continuing action indicates certainty, emphasis, etc.</div>
</div>
<br>
<div class='vocabTitle'>ん (ん )
<div class='hiddenMeaning'>yes yeah uh huh negative verb ending used in informal speech (abbr. of negative verb ending "nu") abbr. of particle "no" abbr. of particle "ni" (used especially when it precedes the verb "naru")</div>
</div>
<br>
<div class='vocabTitle'>を (を )
<div class='hiddenMeaning'>indicates direct object of action indicates subject of causative expression indicates an area traversed indicates time (period) over which action takes place indicates point of departure or separation of action indicates object of desire, like, hate,
etc.</div>
</div>
<br>
</div>
<!-- End of left bar -->