要素をアニメーション化して表示から変更する：なしCSS

Question

「メニュー」ボタンをクリックすると、単純なjavascriptでモバイルメニューがドロップダウンとして表示されるメニューシステムがあります。

このメニューがトランジション/アニメーション表示されるようにしたいと思いますが、display：noneプロパティはCSSアニメーションでアニメーション化できないようです。私は本当に不透明度を使いたいとは思っていません。つまり、モバイルメニューはドキュメントフローになり、デスクトップデバイスではこれが当てはまるとは思わないからです。

これに対するCSS解決策はありますか？ Greensockアニメーションライブラリを使用すると、「表示」プロパティをアニメーション化または変更することができます。私はCSSのアニメーションでこれを動作させることができないようですか？

私はただ一つのdivをアニメーション化したシンプルなペンを作成しました。（これはJSクリックイベントなどをシンプルに保つためです）。

ご覧のとおり、id＃blueboxのCSSと@keyframesアニメーションの両方で、表示をコメントアウトしました。これらのコメントを解除すると、作成された問題が表示されます。この場合

https://codepen.io/emilychews/pen/xPWddZ

CSS

#bluebox { 
    margin-left: 0px; 
    margin-top: 0px; 
    width: 100px; 
    height: 100px; 
    background: blue; 
    animation: appear 1s ease-in forwards; 
    opacity: 0; 
/* display: none; */ 
} 

@keyframes appear { 
    0% {/*display: none;*/ opacity: 0} 
    1% {display: block; opacity: 0.1;} 
    100% {opacity: 1;} 
} 

HTML

<div id="bluebox"></div> 

Answer 1

I変換を追加することによって、これを解決する修正だからあなたは要素を「スケールアップ」することはできませんでした。幅と高さのプロパティは60fpsの滑らかさを達成するという点で非常にうまくアニメーション化しないので、幅と高さの代わりに縮尺を使用しました。

CSS

#bluebox { 
margin-left: 0px; 
margin-top: 0px; 
width: 100px; 
height: 100px; 
background: blue; 
animation: appear 1s ease-in forwards; 
opacity: 0; 
transform: scaleY(0); 
} 

@keyframes appear { 
    0% {opacity: 0;} 
    1% {opacity: 0; transform: scaleY(1)} 
    100% {opacity: 1; transform: scaleY(1)} 
} 

Answer 2

、あなたが要素をアニメーション化しようとしていることから、私はあなたがおそらくに幅と高さを使用する必要がありますと言うでしょう代わりにあなたの利点。

このようなものは、表示なしの代替として機能する可能性があります。 （Codepen）

#bluebox { 
    width: 0px; 
    height: 0px; 
} 

@keyframes appear { 
    0% { 
    width: 0px; 
    height: 0px; 
    } 
    100% { 
    width: 100px; 
    height: 100px; 
    } 
} 

幅または高さも、あなたの目標に応じて、より自然なアニメーションを可能にするために、あなたのエンド幅/高さに置き換えることができます。私はあなたが望むなら、私が意味するものの例を含めるためにCodepenを更新することができます。

これがあなたが目指していたものかどうか教えてください！

編集：、アニメーションの最初の1％0：要素にscaleYの（0）、次いで不透明で要素でこれをアニメーション：Codepenリンク