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


/* ############################################################ */
/*  Animation mit CSS Keyframes  */
/*  slide-top */
/* ############################################################ */

/* ====== SLIDE  TOP ======  */

.slide-top:hover  {
animation-name: slide-top;
animation-duration: 2s;
animation-iteration-count: 1;
animation-timing-function: linear;
}

@keyframes slide-top  {
0% {transform: translateY(0px);}
50% {transform: translateY(-20px);}
}



/* ############################################################ */
/*  Animation mit CSS Keyframes  */
/*  schwingen */
/* ############################################################ */

.schwingen:hover {
animation-name: schwingen;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-iteration-count: 1;
}

@keyframes schwingen {
25% {transform: rotate3d(0, 0, 1, 15deg);  }
45% {transform: rotate3d(0, 0, 1, -10deg);  }
65% {transform: rotate3d(0, 0, 1, 5deg);  }
85% {transform: rotate3d(0, 0, 1, -5deg);  }
to {transform: rotate3d(0, 0, 1, 0deg);  }
}



/* ############################################################ */
/*  Animation mit CSS Transition  */
/*  drehen */
/* ############################################################ */

/*  DREHEN  */

.drehen  {
transition: all 1s ease-in-out;
}

.drehen:hover {
transform: rotate(2160deg);
}





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

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