Image crossfading without HTML - ONLY CSS

http://stackoverflow.com/questions/28200489/image-crossfading-without-html-only-css

HTML

<div id="pageheader"></div>

CSS

#pageheader {
  background-image: url('http://haarmonie-leimen.de/wp-content/uploads/2018/09/ewout-paulusma-707951-unsplash.jpg');
  height: 500px;
  width: 600px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#pageheader:after{
    content: '';
    display: block;
    width: 100%;
    height: 500px;
    background-image: url('http://placehold.it/350x250');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
    -webkit-animation-name: pageheaderFadeInOut;
    -moz-animation-name: pageheaderFadeInOut;
    animation-name: pageheaderFadeInOut;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 10s;
    -moz-animation-duration: 10s;
    animation-duration: 10s;
}

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

@-moz-keyframes pageheaderFadeInOut {
0% {opacity:1;}
50% {opacity:0;}  
100% {opacity:1;}
}

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