#leftRight {
    position: relative;

    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 12.5em;
    width: auto;

    border: 2px solid #eee;
    box-shadow: 1px 1px 2px 1px #777;
    cursor: pointer;
    overflow: hidden;
}

#leftRight figcaption {
    position: absolute;
    color: #4800ff;
    font: 1.2em/0.7 serif;
    line-height: 110%;
    letter-spacing: .1em;
    word-spacing: .1em;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .3), 1px 1px 0 #505050;
    background: rgba(255, 255, 255, .7);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    width: 100%;
    -o-animation:  t12 12s 2s infinite;
    -webkit-animation:  t12 12s 2s infinite;
    -ms-animation:  t12 12s 2s infinite;
    -moz-animation:  t12 12s 2s infinite;
    animation: t12 12s 2s infinite;
}

@keyframes t12 {
     0%, 80%, 100% {bottom:-150px;}
    15%, 65%       {bottom:  2px;}
}
         
#leftRight:hover figure,
#leftRight:hover figcaption,
#leftRight:hover .laden {
    -o-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}

#leftRight:focus figure,
#leftRight:focus figcaption,
#leftRight:focus .laden {
    -o-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
          
.laden {
    position: relative;
    background: linear-gradient(90deg,#f00,#ffa500,#ff0,
                                #008000,#00f,#800080);
    width: 37.5em;
    height: .195em;
    bottom: -257px;
    -o-animation: balken 12s 2s ease-out infinite;
    -webkit-animation: balken 12s 2s ease-out infinite;
    -ms-animation: balken 12s 2s ease-out infinite;
    -moz-animation: balken 12s 2s ease-out infinite;
    animation: balken 12s 2s ease-out infinite;
    z-index: 2;
}

@keyframes balken {
      0% {width:   0; opacity: 0;}
     10% {width:   0; opacity:.2;}
     80% {width:100%; opacity:.8;}
    100% {width:100%; opacity: 0;}
}
          
.pause {
    position: absolute;
    top: 1px;
    left: 570px;
    color: #eee;
    font: bolder 0.5em/2 Impact;
    opacity: 0;
    -o-transition: .5s;
    -webkit-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
    z-index: 2;
}

#leftRight.pause:after {
    content: 'I I';
}

#leftRight:hover .pause {
    opacity: 1;
}

#leftRight:focus .pause {
    opacity: 1;
}
          
#leftRight figure:nth-of-type(1) {
    -o-animation: slika 240s ease-in-out infinite;
    -webkit-animation: slika 240s ease-in-out infinite;
    -ms-animation: slika 240s ease-in-out infinite;
    -moz-animation: slika 240s ease-in-out infinite;
    animation: slika 240s ease-in-out infinite;
}
#leftRight figure:nth-of-type(2) {
    -o-animation: slika 240s 12s ease-in-out infinite;
    -webkit-animation: slika 240s 12s ease-in-out infinite;
    -ms-animation: slika 240s 12s ease-in-out infinite;
    -moz-animation: slika 240s 12s ease-in-out infinite;
    animation: slika 240s 12s ease-in-out infinite;
}
#leftRight figure:nth-of-type(3) {
    -o-animation: slika 240s 24s ease-in-out infinite;
    -webkit-animation: slika 240s 24s ease-in-out infinite;
    -ms-animation: slika 240s 24s ease-in-out infinite;
    -moz-animation: slika 240s 24s ease-in-out infinite;
    animation: slika 240s 24s ease-in-out infinite;
}
#leftRight figure:nth-of-type(4) {
    -o-animation: slika 240s 36s ease-in-out infinite;
    -webkit-animation: slika 240s 36s ease-in-out infinite;
    -ms-animation: slika 240s 36s ease-in-out infinite;
    -moz-animation: slika 240s 36s ease-in-out infinite;
    animation: slika 240s 36s ease-in-out infinite;
}
#leftRight figure:nth-of-type(5) {
    -o-animation: slika 240s 48s ease-in-out infinite;
    -webkit-animation: slika 240s 48s ease-in-out infinite;
    -ms-animation: slika 240s 48s ease-in-out infinite;
    -moz-animation: slika 240s 48s ease-in-out infinite;
    animation: slika 240s 48s ease-in-out infinite;
}
#leftRight figure:nth-of-type(6) {
    -o-animation: slika 240s 60s ease-in-out infinite;
    -webkit-animation: slika 240s 60s ease-in-out infinite;
    -ms-animation: slika 240s 60s ease-in-out infinite;
    -moz-animation: slika 240s 60s ease-in-out infinite;
    animation: slika 240s 60s ease-in-out infinite;
}
#leftRight figure:nth-of-type(7) {
    -o-animation: slika 240s 72s ease-in-out infinite;
    -webkit-animation: slika 240s 72s ease-in-out infinite;
    -ms-animation: slika 240s 72s ease-in-out infinite;
    -moz-animation: slika 240s 72s ease-in-out infinite;
    animation: slika 240s 72s ease-in-out infinite;
}
#leftRight figure:nth-of-type(8) {
    -o-animation: slika 240s 84s ease-in-out infinite;
    -webkit-animation: slika 240s 84s ease-in-out infinite;
    -ms-animation: slika 240s 84s ease-in-out infinite;
    -moz-animation: slika 240s 84s ease-in-out infinite;
    animation: slika 240s 84s ease-in-out infinite;
}
#leftRight figure:nth-of-type(9) {
    -o-animation: slika 240s 96s ease-in-out infinite;
    -webkit-animation: slika 240s 96s ease-in-out infinite;
    -ms-animation: slika 240s 96s ease-in-out infinite;
    -moz-animation: slika 240s 96s ease-in-out infinite; 
    animation: slika 240s 96s ease-in-out infinite;
}
#leftRight figure:nth-of-type(10) {
    -o-animation: slika 240s 108s ease-in-out infinite;
    -webkit-animation: slika 240s 108s ease-in-out infinite;
    -ms-animation: slika 240s 108s ease-in-out infinite;
    -moz-animation: slika 240s 108s ease-in-out infinite;
    animation: slika 240s 108s ease-in-out infinite;
}
#leftRight figure:nth-of-type(11) {
    -o-animation: slika 240s 120s ease-in-out infinite;
    -webkit-animation: slika 240s 120s ease-in-out infinite;
    -ms-animation: slika 240s 120s ease-in-out infinite;
    -moz-animation: slika 240s 120s ease-in-out infinite;
    animation: slika 240s 120s ease-in-out infinite;
}
#leftRight figure:nth-of-type(12) {
    -o-animation: slika 240s 132s ease-in-out infinite;
    -webkit-animation: slika 240s 132s ease-in-out infinite;
    -ms-animation: slika 240s 132s ease-in-out infinite;
    -moz-animation: slika 240s 132s ease-in-out infinite;
    animation: slika 240s 132s ease-in-out infinite;
}
#leftRight figure:nth-of-type(13) {
    -o-animation: slika 240s 144s ease-in-out infinite;
    -webkit-animation: slika 240s 144s ease-in-out infinite;
    -ms-animation: slika 240s 144s ease-in-out infinite;
    -moz-animation: slika 240s 144s ease-in-out infinite;
    animation: slika 240s 144s ease-in-out infinite;
}
#leftRight figure:nth-of-type(14) {
    -o-animation: slika 240s 156s ease-in-out infinite;
    -webkit-animation: slika 240s 156s ease-in-out infinite;
    -ms-animation: slika 240s 156s ease-in-out infinite;
    -moz-animation: slika 240s 156s ease-in-out infinite;
    animation: slika 240s 156s ease-in-out infinite;
}
#leftRight figure:nth-of-type(15) {
    -o-animation: slika 240s 168s ease-in-out infinite;
    -webkit-animation: slika 240s 168s ease-in-out infinite;
    -ms-animation: slika 240s 168s ease-in-out infinite;
    -moz-animation: slika 240s 168s ease-in-out infinite;
    animation: slika 240s 168s ease-in-out infinite;
}
#leftRight figure:nth-of-type(16) {
    -o-animation: slika 240s 180s ease-in-out infinite;
    -webkit-animation: slika 240s 180s ease-in-out infinite;
    -ms-animation: slika 240s 180s ease-in-out infinite;
    -moz-animation: slika 240s 180s ease-in-out infinite;
    animation: slika 240s 180s ease-in-out infinite;
}
#leftRight figure:nth-of-type(17) {
    -o-animation: slika 240s 192s ease-in-out infinite;
    -webkit-animation: slika 240s 192s ease-in-out infinite;
    -ms-animation: slika 240s 192s ease-in-out infinite;
    -moz-animation: slika 240s 192s ease-in-out infinite;
    animation: slika 240s 192s ease-in-out infinite;
}
#leftRight figure:nth-of-type(18) {
    -o-animation: slika 240s 204s ease-in-out infinite;
    -webkit-animation: slika 240s 204s ease-in-out infinite;
    -ms-animation: slika 240s 204s ease-in-out infinite;
    -moz-animation: slika 240s 204s ease-in-out infinite;
    animation: slika 240s 204s ease-in-out infinite;
}
#leftRight figure:nth-of-type(19) {
    -o-animation: slika 240s 216s ease-in-out infinite;
    -webkit-animation: slika 240s 216s ease-in-out infinite;
    -ms-animation: slika 240s 216s ease-in-out infinite;
    -moz-animation: slika 240s 216s ease-in-out infinite;
    animation: slika 240s 216s ease-in-out infinite;
}
#leftRight figure:nth-of-type(20) {
    -o-animation: slika 240s 228s ease-in-out infinite;
    -webkit-animation: slika 240s 228s ease-in-out infinite;
    -ms-animation: slika 240s 228s ease-in-out infinite;
    -moz-animation: slika 240s 228s ease-in-out infinite;
    animation: slika 240s 228s ease-in-out infinite;
}

@keyframes slika {
      0%,    {top:-500px; opacity:0; z-index:0;}
      1.43%, {top:0;      opacity:1; z-index:1;}
     5%     {top:0;      opacity:1; z-index:1;}
     6.43%  {top: 500px; opacity:0; z-index:0;}
    100%     {top:-500px; opacity:0; z-index:0;}
}