CSS3アニメーションが効かない

文字列を一部隠して、moreボタン付きのアコーディオン動作を作成しています。
以下のコードで実行したところ、アニメーション無しで一瞬でアニメーションの終了処理まで表示がされます。
何かCSSの仕様的な間違えをしているのでしょうか..

html
1<tr>
2  <th class="text-pre" colspan="2">
3    <p class="title">タイトル</p>
4      <div class="description">
5        <p>サンプルテキスト</p>
6      </div>
7      <div class="more-text">more</div>
8  </th>
9</tr>

css
1          .description{
2            overflow: hidden;
3            height: 96px;
4            margin-top: 5px;
5            transition: all 1s ease;
6}
7.description-show{
8            height: auto;
9}

javascript
1// @pkg       jquery 
2// @version 2.2.2
3$(function(){
4  $('.more-text').click(function(){
5    $(this).fadeOut('fast', function() {
6      $(this).prev().addClass('description-show');
7    });
8  });
9});

行動規範の内容に同意します

回答2件

ベストアンサー

max-heightで値を設定しておくと、heightがautoでも行けるようになります。
auto height な CSS Transitions

css
1.description{
2            overflow: hidden;
3            height: 96px;
4            max-height: 96px;
5            margin-top: 5px;
6            transition: all 1s ease;
7}
8.description-show{
9            height: auto;
10            max-height: 1000px;
11}