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.
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
Post a Comment