div.caroani {
    width:  100%;
    height: 100%;
    position: absolute;            
    animation-duration: 18s;
    animation-direction: normal;
    animation-iteration-count: infinite;            
    display: block;
    opacity: 0;
}
div.a {            
    animation-name: ani1;
    animation-delay: 0s;         
}
 
div.b {
    animation-name: ani2;
    animation-delay: 6s;            
}
 
div.c {
    animation-name: ani3;
    animation-delay: 12s;            
}

@keyframes ani1 {
    33% {
        opacity: 1;               
    }
 
    66% {
        display: none;
        opacity: 0
    }
}
 
@keyframes ani2 {
    0% {
        display: none;
        opacity: 0
    }
 
    33% {
        display: block;
        opacity: 1;
    }
 
    66% {
        display: none;
        opacity: 0;
    }           
}
 
@keyframes ani3 {
    0% {
        display: none;
        opacity: 0                
    }
 
    33% {
        display: block;
        opacity: 1;
    }
 
    66% {
        display: none;
        opacity: 0
    }           
}