title: How to put a fade transition in this spoiler?
body: <p>I want to put a fade transition in my spoiler, using CSS. Here is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button style="position:absolute;left:600px;top:20px" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"&gt;See the phrases&lt;/button&gt;
  &lt;link rel='stylesheet' type='text/css' href='style/spoiler.css'/&gt;
  &lt;div id="spoiler" style="display:none;position:absolute;left:600px;top:50px"&gt; 
  &lt;desc1&gt;&amp;nbsp;My phrases:&lt;/desc1&gt;
  &lt;desc2&gt;&lt;ul&gt;&lt;li&gt;First phrase&lt;/li&gt;
  &lt;/ul&gt;&lt;ul&gt;&lt;li&gt;Second phrase&lt;/li&gt;&lt;/ul&gt;
  &lt;/des2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>  #spoiler
  {
      background:#FCFB8B;
      width:280px;
      height:200px;
      -webkit-box-shadow: inset 0 0 3px #1f325d;
      -o-box-shadow: inset 0 0 3px #1f325d;
      -moz-box-shadow: inset 0 0 3px #1f325d;
      -ms-box-shadow: inset 0 0 3px #1f325d;
      box-shadow: inset 0 0 3px #1f325d;
  }
  
  #spoiler desc1
  
  {
     font-family:Arial, Helvetica, sans-serif;
     font-size:18px;
     color:#FA4646;
  }
  
  #spoiler desc2
  {
     font-family:Arial, Helvetica, sans-serif;
     font-size:16px;
     color:#000000;
     position:absolute;
     top:10px;
     left:-15px;
  }
  </code></pre>
  
  <p>Well, I tried to put this code in ID spoiler, but it did not work. Can anyone help me?</p>
  
  <pre><code>-webkit-transition: all .8s ease-in;
  -moz-transition: all .8s ease-in;
  -o-transition: all .8s ease-in;
  -ms-transition: all .8s ease-in;
  </code></pre>
  
  <p>I tried with hover, and worked, but i need automatically, when the button is pressed, the transition. How I can do this?
  Thanks all in advance!</p>