css3のアニメーションでフェードインなどを表現する場合、「display:none」から「display:block」ではアニメーションを効かせる事が出来ないので、代わりに「visibility:hidden;」と「visibility: visible;」を使用します。
ただ、visibilityの指定のみだと、アニメーションは効かないので必ず一緒に「opacity」の指定もします。
visibility
visibilityプロパティは、ボックスの表示(visible)・非表示(hidden)を指定する際に使用します。
非表示にした場合にも、ボックス自体が無くなってしまうわけではなく、表示・非表示を切り替えてもページのレイアウトは変わりません。ボックス自体を無くしてしまいたい場合には、displayプロパティでnoneを指定します。
例
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ドロップダウンメニュー</title> <style> #btn { width: 200px; height: 50px; background: #EE3639; position: relative; } #btn:hover { background: #DE9D9E; } #box { width: 500px; height: 500px; background: #59CED6; position: absolute; top: 50px; left: 0; visibility: hidden; opacity: 0; transition:0.5s; } #btn:hover #box { visibility: visible; opacity: 1; } #inner { width: 200px; height: 200px; background: #222; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </style> </head> <body> <div id="btn"> <div id="box"> <div id="inner"></div> </div> </div> </body> </html>