html - Add a transition after clicking a button that shows a div -


on web page right now, have 8 icons when clicked show div below. how can add transition div, css or html make div gradually ease in instead of showing rapidly? thanks.

link page.

basic div css:

#newspaperbutton { transition: 5s ease; padding: 50px 0; text-align: center; background-color: #afeeee; height: 100px; margin-top:2%; margin-left:2%; margin-right:2%; margin-bottom: 2%; font-family: 'poppins', sans-serif; font-weight: bold; font-size: 32px; -webkit-animation-delay: height 2s; animation-delay: height 2s; 

html:

<section id="interest icons">     <span onclick="myfunction('newspaperbutton')" class="fa-stack fa-lg" id="newspaper">         <i class="fa fa-circle fa-stack-2x"></i>         <i class="fa fa-newspaper-o fa-stack-1x fa-inverse" aria-hidden="true"></i>     </span>  ...  <div id="newspaperbutton" style="display:none">     <p>i'm huge fan of nyt crossword , everyday! (best effort on friday)<p> </div> 


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -