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



/* ############################################################ */
/* 1. | CSS KEYFRAMES-Animation |
/*   fade-in  */
/*   siehe diesbezgl. auch die animationsverzögerung in der datei meue.css */
/*   hinweis: diese keyframes-animation ist mit einer transition-animation gekoppelt */
/* ############################################################ */

@keyframes fade-in {

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




/* ############################################################ */
/* 1. | CSS KEYFRAMES-Animation |
/*   light  */
/*   siehe diesbezgl. auch die animationsverzögerung in der datei meue.css */
/*   hinweis: diese keyframes-animation ist mit einer transition-animation gekoppelt */
/* ############################################################ */

@keyframes light {

0%  {background:repeating-radial-gradient(circle, white,transparent ,white 85px);}
20% {background:repeating-radial-gradient(circle, black,transparent ,black 85px);}
40% {background:repeating-radial-gradient(circle, maroon, transparent, maroon 85px);}
60% {background:repeating-radial-gradient(circle, papayawhip, transparent, papayawhip 85px);}
80% {background:repeating-radial-gradient(circle, white,transparent, white 85px);}
100%  {background:repeating-radial-gradient(circle, azure,transparent ,azure 85px);}

}




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





/* ############################################################ */
/* NACHFOLGEND NUR INFORMATION FÜR SIE */
/* 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.ä. */

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