title: automatically redirect a page with transition using css
body: <p>When the user view the home page, it will automatically jump to another page after 5s. And I want to add in fading transition when jump to another page. Is there possible to do it using css? </p>
  
  <p>This is the coding i found, but it does not have transition when going to another page.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Vert Residence&lt;/title&gt;
  &lt;link href="css/main.css" rel="stylesheet" type="text/css"&gt;
  
  
  &lt;meta name="language" content="en" /&gt;
  &lt;meta content='width=device-width, initial-scale=1.0' name='viewport' /&gt;
  &lt;!---&lt;meta http-equiv="refresh" content="5;URL=vert-residence.html"&gt;---&gt;
  
  &lt;link rel="stylesheet" href="css/jquery.maximage.css?v=1.2" type="text/css" media="screen" charset="utf-8" /&gt;
  &lt;link rel="stylesheet" href="../lib/css/screen.css?v=1.2" type="text/css" media="screen" charset="utf-8" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  .logo-index {
  -webkit-animation-name: example;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 5s;
  /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 5s;
  }
  
  
  @-webkit-keyframes example {
  0% {
  opacity: 100;
  filter: alpha(opacity=1000);
  /* For IE8 and earlier */
  }
  
  100% {
  opacity: 0.0;
  filter: alpha(opacity=0);
  /* For IE8 and earlier */
  }
  }
  
  
  /* Standard syntax */
  @keyframes example {
  0% {
  opacity: 100;
  filter: alpha(opacity=1000);
  /* For IE8 and earlier */
  }
  
  100% {
      opacity: 0.0;
      filter: alpha(opacity=0);
  /* For IE8 and earlier */
  }
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script&gt;
  setTimeout(function() {
    window.location.href = "aboutus.html";
  }, 2000);
  &lt;/script&gt;
  
  
  
  &lt;div class="logo-index"&gt;
      &lt;a href="aboutus.html"&gt;&lt;img src="img/logo-index.png"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When the user wait for 5s it will automatically go to aboutus.html</p>