子div因为父级的转换错误返回初始位置而跳转

Question

我正在尝试使用隐藏的复选框和标签向页脚div添加过渡，但是当我单击标签返回原始尺寸和位置时，首先它会转到顶部，因为它会将尺寸更改为原始尺寸然后它来到了底部。我希望div在底部改变他的尺寸（在底部慢慢改变高度），例如：https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition在-90度（减去90度）旋转。

private void receiveBtn_Click(object sender, EventArgs e)
{
    try
    {
        textBox2.Text = serialPort1.ReadExisting();
    }
    catch (TimeoutException z)
    {
        MessageBox.Show(z.Message)      
    } 
}

这是css：

     <div class="row">
         <div class="col-xsm-2-4 col-sm-3-4 col-smd-4-3 col-md-5-3 col-slg-6-3 col-lg-7-3 col-xlg-8-2">                
             <div class="article">
                <div class="inner-container dance">
                    <label for="dance"></label>
                    <input type="checkbox" id="dance" />

                    <div class="footer">
                        <div class="text pink col-xsm-2-2 col-sm-3-3 col-smd-4-3 col-md-5-4 col-slg-6-4 col-lg-7-4 col-xlg-8-4">
                            <p>Rambert</p>
                        </div>
                        <div class="transparent col-xsm-2-2 col-sm-3-3 col-smd-4-3 col-md-5-4 col-slg-6-4 col-lg-7-4 col-xlg-8-4"></div>
                        <div class="sign col-xsm-2-offset-2 col-sm-3-offset-2 col-smd-4-offset-2 col-md-5-offset-2 col-slg-6-offset-2 col-xlg-7-offset-2 col-xlg-8-offset-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>