MCR Banner s prolinanim

by Petr Haluza

HTML

<div style="projektor">

<img id="mcr-fr-1" class="mcr-fr" src="http://www.hal3000.cz/_pub/images/mcr2018-v1/colors/bila2.jpg" />
<img id="mcr-fr-2" class="mcr-fr" src="http://www.hal3000.cz/_pub/images/mcr2018-v1/colors/cervena.jpg" />
<img id="mcr-fr-3" class="mcr-fr" src="http://www.hal3000.cz/_pub/images/mcr2018-v1/colors/zelena.jpg" />
<img id="mcr-fr-4" class="mcr-fr" src="http://www.hal3000.cz/_pub/images/mcr2018-v1/colors/zluta.jpg" />
<img id="mcr-fr-5" class="mcr-fr" src="http://www.hal3000.cz/_pub/images/mcr2018-v1/colors/cyan.jpg" />
<img id="mcr-fr-6" class="mcr-fr" src="http://www.hal3000.cz/_pub/images/mcr2018-v1/colors/fialova2.jpg" />
<img id="mcr-fr-7" class="mcr-fr" src="http://www.hal3000.cz/_pub/images/mcr2018-v1/colors/fialova.jpg" />

</div>

CSS

body { background: #fff; }

@-webkit-keyframes fr1 {
    0% {        opacity:0;    }
    10% {        opacity:0;    }
    14% {        opacity:1;    }
    100% {        opacity:1;    }
}
@-webkit-keyframes fr2 {
    0% {        opacity:0;    }
    24% {        opacity:0;    }
    28% {        opacity:1;    }
    100% {        opacity:1;    }
}
@-webkit-keyframes fr3 {
    0% {        opacity:0;    }
    38% {        opacity:0;    }
    42% {        opacity:1;    }
    100% {        opacity:1;    }
}
@-webkit-keyframes fr4 {
    0% {        opacity:0;    }
    52% {        opacity:0;    }
    56% {        opacity:1;    }
    100% {        opacity:1;    }
}
@-webkit-keyframes fr5 {
    0% {        opacity:0;    }
    66% {        opacity:0;    }
    70% {        opacity:1;    }
    100% {        opacity:1;    }
}
@-webkit-keyframes fr6 {
    0% {        opacity:0;    }
    80% {        opacity:0;    }
    84% {        opacity:1;    }
    100% {        opacity:1;    }
}
@-moz-keyframes blink {

}
img.mcr-fr {position:absolute; top:0; left:0; }
.mcr-fr {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    /*-moz-*/
}
#mcr-fr-1 {-webkit-animation-name: fr1; z-index:101;}
#mcr-fr-2 {-webkit-animation-name: fr2; z-index:102;}
#mcr-fr-3 {-webkit-animation-name: fr3; z-index:103;}
#mcr-fr-4 {-webkit-animation-name: fr4; z-index:104;}
#mcr-fr-5 {-webkit-animation-name: fr5; z-index:105;}
#mcr-fr-6 {-webkit-animation-name: fr6; z-index:106;}
#mcr-fr-7 {z-index:100;}