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

/* diese datei regelt die css-keyframes-animationen  */

/* ############################################################ */
/* Animation | pendel  */
/* ausgelöst direkt in dieser datei (ANIMATION.CSS)  */
/* ############################################################ */

.wrapper-pendel {position: relative;
width: 300px;height: 300px;
background: rgba(0,0,0,.5);
float: left;
margin-right: 20px;
margin-bottom: 20px;
padding: 0px;
overflow:hidden;
}

#pendel {position: absolute;
height: 50px;
width: 50px;
top: 80px;
left: 125px;
border-radius: 36rem;
background: salmon;
transform-origin: center -90px;
transform: rotate(60deg);
animation: pendel-ani 3s infinite alternate ease-in-out; /* HIER WIRD DIE ANIMATION 'Pendel' AUSGELÖST */
}

@keyframes pendel-ani {
to {
transform: rotate(-60deg);
}

}

/* ############################################################ */
/* Animation | move-rotate  */
/* ausgelöst in der datei FORMAT.CSS , dort wird 'animation:move-rotate' auf die jeweilige css-klasse oder css-id gelegt */
/* ############################################################ */


@keyframes move-rotate {
0% {
transform:translateY(-14px) rotate(360deg);
}

100% {
transform:translateY(14px) rotate(-360deg);
}


}


/* ############################################################ */
/* Hinweis | Animation mit Transition  */
/* die animierte drehung bei mausberührung auf dem hauptmenü ist mit einer transition-animation getätigt und wird mit dem 'transition-befehl' in der datei FORMAT.CSS angelegt und ausgelöst (hover) */
/* ############################################################ */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*

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.
- 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.
- Nach Beendigung einer Mausberührung-Aktion mit hover läuft die Keyframes-Animation dann bei Nicht-Mehr-Mausberührung leider NICHT animiert wieder zurück (sondern springt abrupt zurück).
[ Hinweis dazu: Wenn die Animation AUTOMATISCH (also nicht per Mausberührung) startet so, läuft diese auch animiert wieder zurück (sofern man es ensprechend programmiert oder die Anweisung 'alternate`dazu verwendet. ]


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

*/






