/* = = = = = = = = = = = = = = = = = datei animation.css = = = = = = = = = = = = = = = = = = = = = = = = = */

/* diese datei regelt die css-animationen  */


/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/* SLIDESHOW - BILDWECHSLER */
/* ############################################################ */

#slider { animation: slide 20s infinite;
width: 500%;height:100%;
animation-direction:normal;
}


#slider div {width: 20%;
float: left;display:table;
}

@keyframes slide {

0% { transform: translateX(0);}
17% { transform: translateX(0);}
20% { transform: translateX(-20%);}
37% { transform: translateX(-20%);}
40% { transform: translateX(-40%);}
57% { transform: translateX(-40%);}
60% { transform: translateX(-60%);}
77% { transform: translateX(-60%);}
80% { transform: translateX(-80%);}
100% { transform: translateX(-80%);}

}

.pics {display:table;
padding:0rem;
margin:0;
width:100%;height:100%;
overflow:hidden;
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
}

.pics .inhalt {display:table-cell;vertical-align:bottom;
padding-bottom:1rem;
}

/* = = = = = slideshow-bilder  = = = = =  */

.pic-a-01 {background-image:url(../images/SKRfrei1.jpg);  }

.pic-a-02  {background-image:url(../images/SKRfrei2.jpg); }

.pic-a-03 {background-image:url(../images/SKRfrei3.jpg);  }

.pic-a-04  {background-image:url(../images/SKRfrei4.jpg); }

.pic-a-05 {background-image:url(../images/SKRfrei5.jpg);  }


/* bildanzeiger:aktuelles bild */

.current:before {display:inline-block;
font-family:'Font Awesome 5 Free';/* - 'Font Awesome 5 Free' for Regular and Solid symbols;
                                     - 'Font Awesome 5 Brand' for Brands symbols. */
font-weight: 900;/*  Weight of the font (mandatory)
                     - 400 for Regular and Brands symbols;
                     - 900 for Solid symbols. */
content:"\f111";
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
text-decoration: none;
text-shadow:1px 1px 1px #000;
color:#fff;
padding: 0;
margin:0;
}


/* bildanzeiger:auswahl bilder */

.selection:before {display:inline-block;
font-family:'Font Awesome 5 Free';/* - 'Font Awesome 5 Free' for Regular and Solid symbols;
                                     - 'Font Awesome 5 Brand' for Brands symbols. */
font-weight: 900;/*  Weight of the font (mandatory)
                     - 400 for Regular and Brands symbols;
                     - 900 for Solid symbols. */
content:"\f192";
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
text-decoration: none;
text-shadow:1px 1px 1px #000;
color:#fff;
padding: 0;
margin:0;
}

.pics .inhalt{ animation: xslidetest 60s infinite;
width:500px;
background:xblue
}


@keyframes slidetest {

0% { transform: translateX(0);opacity:1}
17% { transform: translateX(0);opacity:0}
20% { transform: translateX(-20%);opacity:1}
37% { transform: translateX(-20%);}
40% { transform: translateX(-40%);}
57% { transform: translateX(-40%);}
60% { transform: translateX(-60%);}
77% { transform: translateX(-60%);}
80% { transform: translateX(-80%);}
100% { transform: translateX(-80%);}

}







/* ############################################################ */
/* | Animation mit Transition | */
/* die animation HINEINGLEITEN beim men? (bei mobilen aufl?sungen)  wird in der datei datei MENUE.CSS angelegt und dort per css-transition ausgel?st  */
/* die animation VERSCHIEBEN  bei den font-icons beim 'weiter-button'  wird in der datei datei FORMAT.CSS angelegt und dort per css-transition ausgel?st  */
/* die animation DREHEN (bei mobilen aufl?sungen) beim 'menue-schliessen-button'  wird in der datei datei MENUE.CSS angelegt und dort per css-transition ausgel?st  */
/* ############################################################ */




/* ############################################################ */
/* Kurzer ?berblick: ANIMATIONEN mit CSS */

/* Es gibt 2 Arten von CSS Animationen, n?mlich

(1) CSS TRANSITION

(2) CSS ANIMATION (auch KEYFRAMES-ANIMATION genannt).

Bei einer einfachen Animation wie z.b Drehung um 360grad bei Mouseover (hover) ausgel?st,
kann man von aussen nicht erkennen, ob diese mit (1) oder (2) gemacht ist.

(1)=
- Erlaubt nur 2 Zust?nde, Anfangs- und Endzustand
- Braucht zur Ausl?sung einen sog. Trigger (z.b.hover oder focus), in der Regel also eine Mausber?hrung oder Touch.
- Kein Loop (zb. spiele 8x ab) ist NICHT erlaubt.
- Nach Beendigung einer Mausber?hrung-Aktion mit hover l?uft die Transition-Animation dann bei Nicht-Mehr-Mausber?hrung AUCH animiert wieder zur?ck.

(2)=
- Erlaubt die 2 Zust?nde (bzw. die  sind Pflicht) wie bei 1), dann jedoch viele m?gliche Zust?nde dazwischen, eben Keyframes, wie beim Film.
- Startet im Gegensatz zu 1) auch automatisch (z.b. Foto-Slideshow) beim Laden der Seite.
- Loop-Angabe ist ERLAUBT.

GEMEINSAM (1. und 2.) HABEN BEIDE :
- Zeitangabe f?r kompletten Durchlauf
- Zeitverz?gernung (delay), also starte erst nach X sec
- Geschwindigkeitssteuerung , verschiedene, wie : // starte schnell, ende langsam  (ease-out) // starte langsam ende schnell (ease-in) // spiele gleichm?ssig ab (linear)   o.?. */

/* ############################################################ */