/*Quelle: http://ebene11.com/slider-als-keyframe-animation-mit-css3.html*/

/* Definition der Animationen */
/* 1. Bewegung des Sliders */
@keyframes slidesStart01 {
    0%, 15% {left: 0;}
    20%, 35% {left: -100%;}
    40%, 55% {left: -200%;}
    60%, 75% {left: -300%;}
    80%, 95% {left: -400%;}
    100% {left: -500%;}
}
 
@-webkit-keyframes slidesStart01 {
    0%, 15% {left: 0;}
    20%, 35% {left: -100%;}
    40%, 55% {left: -200%;}
    60%, 75% {left: -300%;}
    80%, 95% {left: -400%;}
    100% {left: -500%;}
}
 
@keyframes slidesStart101 {
    0%, 15% {left: 0;}
    20%, 35% {left: -100%;}
    40%, 55% {left: -200%;}
    60%, 75% {left: -300%;}
    80%, 95% {left: -400%;}
    100% {left: -500%;}
}
 
@-webkit-keyframes slidesStart101 {
    0%, 15% {left: 0;}
    20%, 35% {left: -100%;}
    40%, 55% {left: -200%;}
    60%, 75% {left: -300%;}
    80%, 95% {left: -400%;}
    100% {left: -500%;}
}
 
@keyframes slidesStart02 {
    95.01% {left: 0;}
    0%, 15%, 100% {left: -100%;}
    20%, 35% {left: -200%;}
    40%, 55% {left: -300%;}
    60%, 75% {left: -400%;}
    80%, 95% {left: -500%;}
}
 
@-webkit-keyframes slidesStart02 {
    95.01% {left: 0;}
    0%, 15%, 100% {left: -100%;}
    20%, 35% {left: -200%;}
    40%, 55% {left: -300%;}
    60%, 75% {left: -400%;}
    80%, 95% {left: -500%;}
}
 
@keyframes slidesStart102 {
    95.01% {left: 0;}
    0%, 15%, 100% {left: -100%;}
    20%, 35% {left: -200%;}
    40%, 55% {left: -300%;}
    60%, 75% {left: -400%;}
    80%, 95% {left: -500%;}
}
 
@-webkit-keyframes slidesStart102 {
    95.01% {left: 0;}
    0%, 15%, 100% {left: -100%;}
    20%, 35% {left: -200%;}
    40%, 55% {left: -300%;}
    60%, 75% {left: -400%;}
    80%, 95% {left: -500%;}
}
 
@keyframes slidesStart03 {
    75.01% {left: 0;}
    0%, 15%, 100% {left: -200%;}
    20%, 35% {left: -300%;}
    40%, 55% {left: -400%;}
    60%, 75% {left: -500%;}
    80%, 95% {left: -100%;}
}
 
@-webkit-keyframes slidesStart03 {
    75.01% {left: 0;}
    0%, 15%, 100% {left: -200%;}
    20%, 35% {left: -300%;}
    40%, 55% {left: -400%;}
    60%, 75% {left: -500%;}
    80%, 95% {left: -100%;}
}
 
@keyframes slidesStart103 {
    75.01% {left: 0;}
    0%, 15%, 100% {left: -200%;}
    20%, 35% {left: -300%;}
    40%, 55% {left: -400%;}
    60%, 75% {left: -500%;}
    80%, 95% {left: -100%;}
}
 
@-webkit-keyframes slidesStart103 {
    75.01% {left: 0;}
    0%, 15%, 100% {left: -200%;}
    20%, 35% {left: -300%;}
    40%, 55% {left: -400%;}
    60%, 75% {left: -500%;}
    80%, 95% {left: -100%;}
}
 
@keyframes slidesStart04 {
    55.01% {left: 0;}
    0%, 15%, 100% {left: -300%;}
    20%, 35% {left: -400%;}
    40%, 55% {left: -500%;}
    60%, 75% {left: -100%;}
    80%, 95% {left: -200%;}
}
 
@-webkit-keyframes slidesStart04 {
    55.01% {left: 0;}
    0%, 15%, 100% {left: -300%;}
    20%, 35% {left: -400%;}
    40%, 55% {left: -500%;}
    60%, 75% {left: -100%;}
    80%, 95% {left: -200%;}
}
 
@keyframes slidesStart104 {
    55.01% {left: 0;}
    0%, 15%, 100% {left: -300%;}
    20%, 35% {left: -400%;}
    40%, 55% {left: -500%;}
    60%, 75% {left: -100%;}
    80%, 95% {left: -200%;}
}
 
@-webkit-keyframes slidesStart104 {
    55.01% {left: 0;}
    0%, 15%, 100% {left: -300%;}
    20%, 35% {left: -400%;}
    40%, 55% {left: -500%;}
    60%, 75% {left: -100%;}
    80%, 95% {left: -200%;}
}
 
@keyframes slidesStart05 {
    35.01% {left: 0;}
    0%, 15%, 100% {left: -400%;}
    20%, 35% {left: -500%;}
    40%, 55% {left: -100%;}
    60%, 75% {left: -200%;}
    80%, 95% {left: -300%;}
}
 
@-webkit-keyframes slidesStart05 {
    35.01% {left: 0;}
    0%, 15%, 100% {left: -400%;}
    20%, 35% {left: -500%;}
    40%, 55% {left: -100%;}
    60%, 75% {left: -200%;}
    80%, 95% {left: -300%;}
}
 
@keyframes slidesStart105 {
    35.01% {left: 0;}
    0%, 15%, 100% {left: -400%;}
    20%, 35% {left: -500%;}
    40%, 55% {left: -100%;}
    60%, 75% {left: -200%;}
    80%, 95% {left: -300%;}
}
 
@-webkit-keyframes slidesStart105 {
    35.01% {left: 0;}
    0%, 15%, 100% {left: -400%;}
    20%, 35% {left: -500%;}
    40%, 55% {left: -100%;}
    60%, 75% {left: -200%;}
    80%, 95% {left: -300%;}
}
 
/* 2. Wechsel des ersten Slides ans Ende und zurück */
@keyframes slide01ToEndStart01 {
    94.99% {left: 0;}
    95%, 100% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart01 {
    94.99% {left: 0;}
    95%, 100% {left: 100%;}
}
 
@keyframes slide01ToEndStart101 {
    94.99% {left: 0;}
    95%, 100% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart101 {
    94.99% {left: 0;}
    95%, 100% {left: 100%;}
}
 
@keyframes slide01ToEndStart02 {
    59.99%, 95.01% {left: 0;}
    60%, 95% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart02 {
    59.99%, 95.01% {left: 0;}
    60%, 95% {left: 100%;}
}
 
@keyframes slide01ToEndStart102 {
    59.99%, 95.01% {left: 0;}
    60%, 95% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart102 {
    49.99%, 60.01% {left: 0;}
    50%, 60% {left: 100%;}
}
 
@keyframes slide01ToEndStart03 {
    39.99%, 75.01% {left: 0;}
    40%, 75% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart03 {
    39.99%, 75.01% {left: 0;}
    40%, 75% {left: 100%;}
}
 
@keyframes slide01ToEndStart103 {
    39.99%, 75.01% {left: 0;}
    40%, 75% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart103 {
    39.99%, 75.01% {left: 0;}
    40%, 75% {left: 100%;}
} 
 
@keyframes slide01ToEndStart04 {
    19.99%, 55.01% {left: 0;}
    20%, 55% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart04 {
    19.99%, 55.01% {left: 0;}
    20%, 55% {left: 100%;}
}
 
@keyframes slide01ToEndStart104 {
    19.99%, 55.01% {left: 0;}
    20%, 55% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart104 {
    19.99%, 55.01% {left: 0;}
    20%, 55% {left: 100%;}
}
 
@keyframes slide01ToEndStart05 {
    35.01% {left: 0;}
    0%, 35% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart05 {
    35.01% {left: 0;}
    0%, 35% {left: 100%;}
}
 
@keyframes slide01ToEndStart105 {
    35.01% {left: 0;}
    0%, 35% {left: 100%;}
}
 
@-webkit-keyframes slide01ToEndStart105 {
    35.01% {left: 0;}
    0%, 35% {left: 100%;}
}
 

/* Basisfunktionalität des Sliders */
.slider {
    overflow: hidden;
}
 
.slider input {
    position: absolute;
    left: -10000px;
    top: 0;
}
 
.slideList {
    width: 500%; /* Anzahl der Slides mal 100 */
    position: relative; /* über die relative Positionierung wird der Slider durchs Sichtfenster geschoben */
    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
    transition: left 2s; /* für den fließenden Schub */
    margin: 0;
    padding: 0;
}
 
.slideList:after {
    content: ".";
    display: block;
    height: .1px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: hidden;
}
 
.slide {
    list-style: none;
    width: 20%; /* Breite gleich 100 / Anzahl Slides */
    float: left;
    position: relative;
    left: 0;
    -webkit-transition: left 0s .5s;
    -moz-transition: left 0s .5s;
    -o-transition: left 0s .5s;
    transition: left 0s .5s; /*bei Klick auf ein Control werden alle Slides wieder auf Original-Position geschoben, hier für den ersten relevant. Damit die Aktion erst nach der slides-Verschiebung beginnt, kommt ein delay hinzu*/
}
 
.slideList img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
 
/* Zuweisung der Keyframe-Animationen */
.slideList,
.slide,
.slideControl label {
    -webkit-animation: 20s 2s infinite;
    animation: 20s 2s infinite; /* allgemeingültige Werte für die Keyframe-Animation */
}
 
/* Positionierung und Aufruf der passenden Animation in Abhängigkeit des Status der Radiobuttons */
#slide01:checked ~ .slideList {
    -webkit-animation-name: slidesStart01;
    animation-name: slidesStart01;
    left: 0;
}
 
#slide02:checked ~ .slideList {
    -webkit-animation-name: slidesStart02;
    animation-name: slidesStart02;
    left: -100%;
}
 
#slide03:checked ~ .slideList {
    -webkit-animation-name: slidesStart03;
    animation-name: slidesStart03;
    left: -200%;
}
 
#slide04:checked ~ .slideList {
    -webkit-animation-name: slidesStart04;
    animation-name: slidesStart04;
    left: -300%;
}
 
#slide05:checked ~ .slideList {
    -webkit-animation-name: slidesStart05;
    animation-name: slidesStart05;
    left: -400%;
}
 
/* Damit der Wechsel von 01 zu 101, 02 zu 102 usw. klappt, muss jeweils eine andere Animation aufgerufen werden*/
#slide101:checked ~ .slideList {
    -webkit-animation-name: slidesStart101;
    animation-name: slidesStart101;
    left: 0;
}
 
#slide102:checked ~ .slideList {
    -webkit-animation-name: slidesStart102;
    animation-name: slidesStart102;
    left: -100%;
}
 
#slide103:checked ~ .slideList {
    -webkit-animation-name: slidesStart103;
    animation-name: slidesStart103;
    left: -200%;
}
 
#slide104:checked ~ .slideList {
    -webkit-animation-name: slidesStart104;
    animation-name: slidesStart104;
    left: -300%;
}
 
#slide105:checked ~ .slideList {
    -webkit-animation-name: slidesStart105;
    animation-name: slidesStart105;
    left: -400%;
}
 
/* Der erste Slide wird jeweils zur rechten Zeit an den Anfang oder das Ende gestellt */
#slide01:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart01;
    animation-name: slide01ToEndStart01;
}
 
#slide02:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart02;
    animation-name: slide01ToEndStart02;
}
 
#slide03:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart03;
    animation-name: slide01ToEndStart03;
}
 
#slide04:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart04;
    animation-name: slide01ToEndStart04;
}
 
#slide05:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart05;
    animation-name: slide01ToEndStart05;
}
 
/* Separate Animations-Namen für die zweite Steuerung */
#slide101:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart101;
    animation-name: slide01ToEndStart101;
}
 
#slide102:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart102;
    animation-name: slide01ToEndStart102;
}
 
#slide103:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart103;
    animation-name: slide01ToEndStart103;
}
 
#slide104:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart104;
    animation-name: slide01ToEndStart104;
}
 
#slide105:checked ~ .slideList .slide01 {
    -webkit-animation-name: slide01ToEndStart105;
    animation-name: slide01ToEndStart105;
}