title: CSS animation, fade in fade out opacity on automated slideshow
body: <p>I want to make a slideshow where the pictures transition through fade in fade out opacity. it just glooms on the screen and switches to the next picture.</p>
  
  <p>I got it to work but added the other brower webkits and it stopped working. Can't seem to find my mistake.. The slideshow still works.</p>
  
  <p>This is the code:</p>
  
  <pre><code>/* Fading animation in css */
  .fade {
  -webkit-animation-name: fade 5s;
  animation-name: fade 5s;
  -moz-animation: fade 5s;
  -o-animation: fade 5s;
  }
  
  @-webkit-keyframes fade {
  0% {opacity: 0.2} 
  50% {opacity: 1}
  100% {opacity:0.2}
  }
  
  @-moz-keyframes fade{
      0% {opacity: 0.2} 
    50% {opacity: 1}
    100% {opacity:0}  
  }
  
  @keyframes fade {
    0% {opacity: 0.2} 
    50% {opacity: 1}
    100%{opacity: 0.2}
      }
  @-o-keyframes fade {
  0% {opacity: 0.2} 
    50% {opacity: 1}
    100%{opacity: 0.2}
  
  }
  
  &lt;div class="slideshowcontainer"&gt;
          &lt;div class="slideshow fade"&gt;
              &lt;img src="images/PSA.PNG"&gt;
          &lt;/div&gt;
          &lt;div class="slideshow fade"&gt;
              &lt;img src="images/OWSA.PNG"&gt;
          &lt;/div&gt;
          &lt;div class="slideshow fade"&gt;
              &lt;img src="images/CEAC.PNG"&gt;
          &lt;/div&gt;
  </code></pre>