Animation when changing the display into HTML

Question

Hello my dear programmers friends of this our Brazil!

I need your help on the following question:
I have a button that when pressed changes the display from a div to block. So:

CSS

#form-pergunta {
  display: none;
}

Javascript

function obj(x) {
 return document.getElementById(x);
}

function ApertarBotao() {
 obj("form-pergunta").style.display = "block";
}

Ai I call the function Aperture() there in HTML with onclick...
I wonder how to animate this display change... like... make the form-question div slowly appear from top to bottom.

Answer 1

I think this might help you a little:

    function obj(x) {
        return document.getElementById(x);
    }

    function ApertarBotao() {
        obj("form-pergunta").style.display = "block";
    }

    #form-pergunta{
        width: 300px;
        height: 300px;
        background-color: red;
        display: none;
        -webkit-animation: animate-div 3s;
    }
    @-webkit-keyframes animate-div {
        from { opacity: 0; margin-top: -150px;}
        to { opacity: 1;margin-top: 0px;}
    }

    <div id="form-pergunta"></div>
    <button onclick="ApertarBotao()">Show Div</button>

Answer 2

Here, you must adjust the id of the element to appear and time within the function onclick button

function fadeIn(elem, speed) {
   if(!elem.style.opacity)
   {
       elem.style.opacity = 0;
   }
   var op = setInterval(function(){
      if(elem.style.opacity == 1) clearInterval(op);
      elem.style.opacity = parseFloat(elem.style.opacity) + 0.03;
   }, speed /100);
}

div {
   width: 200px;
   opacity: 0;
   height: 200px;
   background-color: red;
}

<button onclick="fadeIn(hey, 2000)">clica aqui</button>
<div id="hey"></div>