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

/* diese datei regelt die css-animationen  */



/* ############################################################ */
/* | CSS KEYFRAMES Animation |
/*   puff-in  */
/* ############################################################ */

@keyframes puff-in {

0%{opacity:0;transform-origin:50% 50%;transform:scale(1);}
80%{opacity:1;transform-origin:50% 50%;transform:scale(.5);}
100%{opacity:1;transform-origin:50% 50%;transform:scale(1);}

}


/* ############################################################ */
/* | CSS KEYFRAMES Animation |
/*   fade-in  */
/* ############################################################ */


@keyframes fade-in {

0% {transform: scale(.8);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}

}

/* ############################################################ */
/* | CSS KEYFRAMES Animation |
/*   move-down  */
/* ############################################################ */


@keyframes move-down {

0% {transform: translateY(0);}
50% {transform: translateY(10px);}
100% {transform: translateY(0);}

}


/* ############################################################ */
/* | CSS KEYFRAMES Animation |
/*   move-left  */
/* ############################################################ */


@keyframes move-left {

0% {transform: translateX(0);}
50% {transform: translateX(-10px);}
100% {transform: translateX(0);}

}


/* ############################################################ */
/* | CSS KEYFRAMES Animation |
/*   drehen */
/* ############################################################ */

@keyframes drehen {

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

}


/* ############################################################ */
/* | CSS KEYFRAMES Animation |
/*   flip */
/* ############################################################ */


@keyframes flip {

0% {transform: rotateX(0deg) rotateY(0deg);}
50% {transform: rotateX(360deg) rotateY(45deg)}
100% {transform: rotateX(0deg) rotateY(180deg);}

}



/* ############################################################ */
/* 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  (ease-out) // starte langsam ende schnell (ease-in) // spiele gleichmässig ab (linear)   o.ä. */

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