CSS

css fadeout animation

#fadeout{
  opacity: 0;
  transition: opacity 2s linear;
}

#fadein{
  opacity: 1;
  transition: opacity 2s linear;
}

javascript fadein fadeout

#slideSource {
  opacity: 1;
  transition: opacity 1s; 
}

#slideSource.fade {
  opacity: 0;
}

fade in and fadeout animation

.elementToFadeInAndOut {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

javascript fadein fadeout

var slideSource = document.getElementById('slideSource');

document.getElementById('handle').onclick = function () {
  slideSource.classList.toggle('fade');
}

javascript fadein fadeout

<button id="handle">Fade</button> 
<div id="slideSource">Whatever you want here - images or text</div>
 Run code snippet