/* = = = = = = = = = = = = = = = = = Datei animation.css = = = = = = = = = = = = = = = = = = = = = = = = = */



/* ############################################################################### */
/* CSS KEYFRAMES-Animation 														   */
/* fade-in  																	   */
/* Hinweis: Diese Keyframes-Animation ist mit einer Transition-Animation gekoppelt */
/* Siehe diesbezgl. auch die Animationsverzögerung in der Datei meue.css 		   */
/* ############################################################################### */

@keyframes fade-in {

0% {transform: scale(0);}
70% {transform: scale(1.05);}
100% {transform: scale(1);}
}



/* ############################################################################### */
/* CSS KEYFRAMES-Animation														   */
/* drehen  																		   */
/* ############################################################################### */

@keyframes drehen {

0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}


/* ############################################################################### */
/* CSS KEYFRAMES-Animation														   */
/* Shine-Effect(scheinen)  														   */
/* ############################################################################### */

@keyframes shine-effect {

0% {top:0px; left: -200%; }

100% {top:0px; left:150%;  }

}



/* ################################################################################################################ */
/* | Animation mit CSS Transition 																					*/
/* hinweis: eventuelle animationen mit TRANSITION sind direkt in der datei datei MENUE.CSS bzw. FORMAT.CSS angelegt */
/* ################################################################################################################ */





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


/*

CSS-Animationen ermöglichen auf einfache Art, was frueher nur mit der komplizierteren Flash- oder Javascript-Technik zu bewältigen war.


Es gibt 2 Arten von CSS Animationen, naemlich

(1) CSS TRANSITION

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

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

(1) =
- Erlaubt nur 2 Zustaende, Anfangs- und Endzustand
- Braucht zur Ausloesung einen sog. Trigger (z.b.hover oder focus), in der Regel also eine Mausbeuerung oder Touch.
- Kein Loop gestattet (zb. spiele 8x ab ist NICHT erlaubt).
- Spielt unendlich ab (infinite).

(2) =
- Erlaubt die 2 Zustaende (bzw. die  sind Pflicht) wie bei 1), dann jedoch viele mogliche Zustaende 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.
- Spielt unendlich ab (infinite).

GEMEINSAM (1. und 2.) HABEN BEIDE  bezueglich der Anfangs-oder Endgeschwindigkeit:
- Zeitangabe fuer kompletten Durchlauf
- Zeitverzoegernung (delay), also starte erst nach X sec
- Geschwindigkeitssteuerung , verschiedene, wie :
// starte schnell, ende langsam  (ease-out)
// starte langsam ende schnell (ease-in)
// spiele gleichmaessig ab (linear) o.a.

*/