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

/* diese datei regelt die css-animationen  */

/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/*  ANI-ROTATE  */
/* ############################################################ */

.ani-rotate { animation: ani-rotate 20s infinite linear; }

@keyframes ani-rotate {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}



/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/*  ANI-ROTATE-2  */
/* ############################################################ */

.ani-rotate-2 { animation: ani-rotate-2 10s infinite; }

@keyframes ani-rotate-2 {
0%{transform:rotateY(0);}
50% {transform:rotateY(-180deg);}
70% {transform:rotateY(0deg);}
}



/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/*  ANI-ROTATE-3  */
/* ############################################################ */

.ani-rotate-3 { animation: ani-rotate-3 10s infinite; }

@keyframes ani-rotate-3 {
0%{transform:rotateX(0);}
50% {transform:rotateX(-180deg);}
70% {transform:rotateX(0deg);}
}



/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/*  ANI-SLIDE  */
/* ############################################################ */

.ani-slide { animation: ani-slide 15s infinite linear;   }

@keyframes ani-slide {

0%{transform:translate(0);}
25% {transform:translate(90px);}
50% {transform:translate(-90px);}
75% {transform:translate(0px);}


}



/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/*  ANI-SLIDE-2 */
/* ############################################################ */

.ani-slide-2 { animation: ani-slide-2 5s infinite linear; }

@keyframes ani-slide-2 {
0%{transform:translateY(0);}
50% {transform:translateY(-50px);}
100% {transform:translateY(0px);}
}



/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/*  ANI-SLIDE-3 */
/* ############################################################ */

.ani-slide-3 { animation: ani-slide-3 5s infinite linear; }

@keyframes ani-slide-3 {
0%{transform:translateX(0);}
50% {transform:translateX(-50px);}
100% {transform:translateX(0px);}
}


/* ############################################################ */
/* Animation | pendel  */
/* ANI-PENDEL  */
/* ############################################################ */

.ani-pendel { animation: ani-pendel 5s infinite; }

@keyframes ani-pendel {
0% {transform: rotate(20deg); }
50% {transform: rotate(-20deg); }
100% {transform: rotate(20deg); }
}



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

*/