Trying to have a div fade in on button press with transition time and delay, but can't animate switch between display:none and display:inline?

I have a div on a website that is currently set up such that it starts at opacity:0; and transitions to opacity:1; on button press. I chose that since I found you couldn't have a switch from display:none; to display:inline; have a transition on button press. However, now when the page is viewed in smaller windows, there's a scroll bar, since the content is still there, just not view-able. What choices do I have? Can I somehow get the div to have display:none; and still fade in?

I have no knowledge of jQuery, so if that's somehow a solution to this problem could you guys spell it out very simply for me? I'll put a JSFiddle below.


Thanks for any help!

Answers 1

  • A possible solution (if you don't mind a slightly different type of animation) would be to set your div to transform:scale(0); then animate both opacity and scale with a display class.

    See this fiddle.


    #abouttextbackground {


    var about_text = document.getElementById("abouttextbackground");                

    If you want to keep the animation the same then @gibberish's solution would work better.

Related Articles