.firstanimation {
        animation:cycle1 20s linear infinite;
        }
.secondanimation {
        animation:cycle2 20s linear infinite;
        }
.thirdanimation {
        animation:cycle3 20s linear infinite;
        }
        
        
@keyframes cycle1 {
        0%  { left:0%; visibility:visible;}     /* At 0% it is on screen and in view                                            */
        30%  { left:0%; }                       /* hold it there until 30%                                                      */
        33% { left:-100%; visibility:hidden;}   /* from 30% to 33% slide it off to the left                                     */
        96% { left:100%; visibility:hidden;}    /* from 33% to 96% reposition to the right under the radar                      */
        97% { left:100%; visibility:visible;}   /* at 97% switch the visibility on ready to slide in from the right             */
        100%{ left:0%; }                        /* between 97% and 100% it slides in from the right                             */
        }

@keyframes cycle2 {
        0%  { left:-100%; visibility:hidden;}   /* At 0% it is positioned off to the left and invisible                         */
        29% { left:100%; visibility:hidden;}    /* Move under the radar and keep it invisible until 29%                         */
        30% { left:100%; visibility:visible;}   /* switch on the visibility at 30% ready to slide in from the right             */
        33% { left: 0%; }                       /* from 30% to 33% slide in from the right as cycle1 goes off to the left       */
        63% { left: 0%; }                       /* hold it there until 63%                                                      */
        66% { left:-100%; visibility:hidden;}   /* from 63% to 66% slide it off to the left                                     */
        100% { left:-100%; visibility:hidden;}  /* A stake in the ground at 100% to make the CSS work                           */
        }

@keyframes cycle3 {
        0%  { left:-100%; visibility:hidden;}   /* At 0% it is positioned off to the left and invisible                         */
        62% { left:100%; visibility:hidden;}    /* Move under the radar and keep it invisible until 62%                         */
        63% { left:100%; visibility:visible;}
        66% { left:0%; visibility:visible;}
        97% { left:0%; visibility:visible;}
        100% { left:-100%; visibility:hidden;}  /* A stake in the ground at 100% to make the CSS work                           */
        }





.firstreveal{
        animation:reveal1 20s linear infinite;
        }
.secondreveal {
        animation:reveal2 20s linear infinite;
        }
.thirdreveal {
        animation:reveal3 20s linear infinite;
        }
        
        
@keyframes reveal1 {
        0%  { opacity:1;}
        30%  { opacity:1;}
        33% { opacity:0;}
        96% { opacity:0;}
        100% { opacity:1; }
        }
        
        
@keyframes reveal2 {
        0%  { opacity:0;}
        30%  { opacity:0;}
        33% { opacity:1;}
        63% { opacity:1;}
        66%  { opacity:0;}
        100% { opacity:0; }
        }


@keyframes reveal3 {
        0%  { opacity:0;}
        63% { opacity:0;}
        66%  { opacity:1;}
        97%  { opacity:1;}
        100% { opacity:0; }
        }