メニューホバー「ロールダウン」エフェクトCSS

Question

メニューに特定のホバー効果を加えようとしています。あなたはwww.firstborn.comで私が望む効果を見ることができます。基本的には上から滑り落ちますが、均等には滑りません。私は様々なCSSを試してみたが、コードを調べても、それを正しく理解することはできない。 CSSだけでは不可能ですか？ animate.cssのようなものをインストールする必要がありますか？

これは私が使用するコードです。 IDは私のメニュー全体の1つです。これは動作するはず

#Top_bar:hover { 
 
-webkit-transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1); 
 
-moz-transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1); 
 
transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1); 
 
background: #000; 
 
color: #fff; 
 
}

Answer 1

、基本的に、あなたは、要素の上に高さプロパティを設定します。あなたは胴体の高さを設定しなければなりません。ホバー上でその高さを変えなければなりません。

#Top_bar { 
-webkit-transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1); 
-moz-transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1); 
transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1); 
background: #000; 
color: #fff; 
height: 200px; 
} 

#Top_bar:hover{ 
height: 500px; 
}