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



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

/* | Animation mit KEYFRAMES | */

/* Changecolor  */

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



@keyframes change-bg {



0% {background-position: 0% 50%}

100% {background-position: 100% 50%}



}





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

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

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







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



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