如何在不知道高度之前进行高度过渡？

我想在CSS中进行高度转换,但我注意到我必须静态调整高度才能使其正常工作.

这是我的代码使用静态高度:

    

        Lastname
            
        
        Firstname
            
        
    


/* CSS */

.content{
    overflow:hidden;
}

.content.show{
    height:433px !important;       <<---------  //I would not define this height
    transition:0.5s;
    -webkit-transform:translateY(0);
}

.content.hidden{
    height:60px;
    transition:0.5s;
    -webkit-transform:translateY(0);
}

这是我想要的自动高度代码:

    

        Lastname
            
        
        Firstname
            
        
    


/* CSS */

.content{
    overflow:hidden;
}

.content.show{
    height:auto !important;     <<<----------
    transition:0.5s;
    -webkit-transform:translateY(0);
}

.content.hidden{
    height:60px;
    transition:0.5s;
    -webkit-transform:translateY(0);
}

有人会知道如何运行此代码？我指定我不想使用javascript.