title: jQuery fadein fadeout effects in css
body: <p>I am making an app using Cordova and it uses jQuery effects namely fadein and fadeout. The effects are very slow on my android device. I thought of converting them to CSS and I saw ways to do that using toggleClass etc.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function($) {
              $( "#fade" ).click(function() {
                  $('#fader').toggleClass('fadeout');
              });
              $('#fader').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                  $('#fader').toggleClass('hide');
              });
              setTimeout(500)
          });
      &lt;/script&gt;
      &lt;style&gt;
          div{
              background-color: blue;
          }
          #fader{
              display: block;
              opacity: 1;
              -webkit-transition: opacity 0.35s linear;
              -moz-transition: opacity 0.35s linear;
              -ms-transition: opacity 0.35s linear;
              -o-transition: opacity 0.35s linear;
              transition: opacity 0.35s linear;
          }
          #fader.fadeout{
              opacity: 0;
          }
          #fader.fadeout.hide{
              display: none;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="fader"&gt;
          css
      &lt;/div&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;div id="fade"&gt;
          DivButton
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But I encountered two issues:</p>
  
  <p>Issue 1</p>
  
  <p>While using jQuery fadein, in the end it sets display to none. Similarly while using fadeout, it removes the display:none property. Also the animations are abrupt. How can I do that in CSS?</p>
  
  <p>Issue 2</p>
  
  <p>I would like to use delay function along with the fadein and fadeout in CSS. How can I achieve that?</p>
  
  <p>Please help guys.</p>
  
  <p>Thanks in advance.</p>