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

/* diese datei regelt die css-animationen  */



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

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

/* RÜCKWÄRTS abspielen auf index1.html, index3.html, index5.html */
#slider.reverse {
animation-direction:reverse;
}

#slider.alternate {
animation-direction:alternate;
}


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

@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 {text-align:center;
padding:1rem;
margin:0;
width:100%;height:100%;
overflow:hidden;
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
}

.pics .fa {color:#fff;font-size:1.2rem;text-shadow:1px 1px 1px #000;
}

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

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

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

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

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

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



/* ############################################################ */
/* | Animation mit Transition | */
/* die animation 'IN-DIE-SEITE-HINEIN-SCHIEBEN' beim menü  wird in der datei datei MENUE.CSS angelegt und dort per css-transition ausgelöst  */
/* die animation 'DREHEN UM 45GRAD' im 'inhalts-bereich'bei den font-icons(WEITER-LINK) wird in der datei datei FORMAT.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 // starte langsam ende schnell // spiele gleichmässig (linear) ab  o.ä.

*/