css - テキスト遷移をスムーズにする

Question

ねえ、私は自分のサイトを構築していますが、問題があります。

ここに私のサイトがあります: http://legacybydesign.tv/webdesign/index.html

メニューを引き継ぐと消費します。だけど文字がジャンプするのですが、もっと滑らかにできないかな？

Answer 1

ease-in-outH2 に適用し、クラスは非アクティブ

.inactive {
height: 5.083em;
line-height: 5.083em;
padding: 0 2.618em 0 1.618em;
border-bottom: 0.09em solid rgba(255, 234, 173, 0.1);
transition: height 0.5s ease-in-out;
-webkit-transition: height 0.5s ease-in-out;
}

.inactive h2 {
color: white;
font-weight: 100;
text-align: right;
-webkit-transition: all 500ms ease-in-out;
}

Answer 2

heightプロパティでのみアニメーション化していますが、行の高さも変更しています。animationプロパティを次のように変更してみてください.inactive。

transition: height 0.5s ease-out, line-height 0.5s ease-out; 
-webkit-transition: height 0.5s ease-out, line-height 0.5s ease-out;