私のアニメーションdivは、アニメーション中に戻るよりも上にグリッチします

Question

ヘッダーとその中の段落で基本divを作っています。多段階アニメーションを実行すると、ボックスが下に移動するよりも上にグリッチします。それは非常に不思議で奇妙に見える。あなたはhttps://jsfiddle.net/yajuy8qy/で私のエラーを見ることができます。 コード：

<div class="enlarge"> 
    <h1 class="title">Welcome!</h1> 
    <p>Zach</p> 
    </div> 
<script> 
$(document).ready(function() { 
$(".enlarge").animate({minHeight: '500px'}, "slow"); 
$(".enlarge").animate({width: '80%'}, "slow"); 
}); 
</script> 
<style> 
.enlarge { 
height: 500px; 
width: 50%; 
background-color: #2098D1; 
align-items: center; 
align-content: center; 
border-radius: 15px; 
position: relative; 
margin: 10px auto; 
} 
</style> 

ありがとうございます！

Answer 1

デフォルトのパディングプロパティに問題があるようです。 divのパディングを設定してみてください（1pxの表示でもグリッチが修正されます）。

.enlarge{ 
    padding: 1px; 
}