.callout {
    color: red;
}

.crossfade>figure{
    animation:imageAnimation 30s linear infinite 0s;
    backface-visibility:hidden;
    background-size:cover;
    background-position:center center;
    color:transparent;
    height:100%;
    left:0px;
    opacity:0;
    position:absolute;
    top:0px;
    width:100%;
    z-index:0;
}
.crossfade>figure:nth-child(1){background-image:url('../img/bg01.jpg');}
.crossfade>figure:nth-child(2){animation-delay:6s;background-image:url('../img/bg02.jpg');}
.crossfade>figure:nth-child(3){animation-delay:12s;background-image:url('../img/bg11.jpg');}
.crossfade>figure:nth-child(4){animation-delay:18s;background-image:url('../img/bg07.jpg');}
.crossfade>figure:nth-child(5){animation-delay:24s;background-image:url('../img/bg08.jpg');}

@keyframes  
imageAnimation{100%{
    animation-timing-function:ease-in;
    opacity:0;
    }
    8%{
    animation-timing-function:ease-out;
    opacity:1;
    }
    17%{
    opacity:1
    }
    25%{
    opacity:0
    }
    100%{
    opacity:0
    }
}