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

/* ############################################################ */
/* | Animation mit CSS-KEYFRAMES | */
/* ############################################################ */


/* = = = = = = = = = =  SLIDESHOW = = = = =  = = = = =  */


/* = = = = =  Slideshow-Bilder hier festlegen = = = = =  */

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

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

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

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

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



/* = = = = =  Animation für 5 Bilder = = = = =  */

#slider-5-pics {
width: 500%;height:100%;
ANIMATION: slide-5-pics 45s infinite;
ANIMATION-DIRECTION:normal;
}

#slider-5-pics .pics {width: 20%;
float: left;
}

@keyframes slide-5-pics {

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%);}
98% { transform: translateX(-80%);}

}


/* = = = = =  Animation für 4 Bilder = = = = =  */

#slider-4-pics {
width: 400%;height:100%;
ANIMATION: slide-4-pics 60s infinite;
ANIMATION-DIRECTION:normal;
}

#slider-4-pics .pics {width: 25%;
float: left;
}

@keyframes slide-4-pics {

0% { transform: translateX(0);}
22% { transform: translateX(0);}

25% { transform: translateX(-25%);}
47% { transform: translateX(-25%);}

50% { transform: translateX(-50%);}
72% { transform: translateX(-50%);}

75% { transform: translateX(-75%);}
97% { transform: translateX(-75%);}

}


/* = = = = =  Animation für 3 Bilder = = = = =  */

#slider-3-pics {
width: 300%;height:100%;
ANIMATION: slide-3-pics 60s infinite;
ANIMATION-DIRECTION:normal;
}

#slider-3-pics .pics {width: 33.33%;
float: left;
}

@keyframes slide-3-pics {

0%  { transform: translateX(0);}
30% { transform: translateX(0);}

33.33% { transform: translateX(-33.33%);}
63%    { transform: translateX(-33.33%);}

66.66% { transform: translateX(-66.66%);}
96%    { transform: translateX(-66.66%);}

}



/* = = = = = Style = = = = =  */

.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;text-align:center;
padding-bottom:0rem;
}



/* = = = = =  Bildanzahl-Anzeiger = = = = =  */

/* bildanzeiger: icon */

.pics i: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:"\f030";
font-style: normal;
color:#455F5F;
padding: 0 .5rem 0 0 ;
margin:0;
font-size:2rem;
}

/* bildanzeiger: anzahl */

.pics i {display:inline-block;
background:rgba(255,255,255,.5);
color:#000;
font-style:normal;
padding: 0 1rem;
margin:0;
}





/* ############################################################ */
/* | Animation mit CSS-Transition | */
/* Hinweis: eventuelle Animationen mit TRANSITION sind direkt in der Datei  MENUE.CSS bzw. FORMAT.CSS angelegt */
/* ############################################################ */




/* ############################################################ */
/* NACHFOLGEND NUR INFORMATION */
/* Kurzer Überblick: ANIMATIONEN mit CSS Keyframes und CSS Transition */
/* ############################################################ */



/* 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.

(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.ä. */

/*  = = = = = = = = = = = = = = = = = = = = = = = = = = = */