Pure Fullscreen CSS Slideshow with double fade in/out effect for displaced elements on background slide elements

Question

I'm trying to have this slide show jsfiddle with cover background images slides and displaced text on it, working without the auto loop animation, only by buttons. All elements of the slideshow have separate fade in/out applied, so background is shown before text. Try to click on buttons, everything work fine, but I'm not able to remove autoloop. Probably I've to change animation for transition,and remove -webkit-animation: titleAnimation 24s linear infinite 0s; on all elements, I don't know. I've tried but without success.

Answer 1

I've solved my problem, I put here the solution, could be interesting for someone seeking for something like this. I wasn't able to find something similar online.

I have updated the animations like this:

   /* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
     -webkit-animation-fill-mode:forwards; }
}

and added an animation fill mode to the elements to force them stay at last animation frame (still visible with opacity:1)

-webkit-animation-fill-mode:forwards;

Here the DEMO