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

/* diese datei regelt die css-animationen  */



/* ############################################################ */
/* | CSS KEYFRAMES Animation |
/*   HEARTBEAT - auf seite quintus.html */
/* ############################################################ */


.heartbeat {
animation-name: pulse-ani;
animation-duration: 3000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}



@keyframes pulse-ani {
 0% { transform: scale(1); }
 30% { transform: scale(1); }
 40% { transform: scale(1.08); }
 50% { transform: scale(1); }
 60% { transform: scale(1); }
 70% { transform: scale(1.05); }
 80% { transform: scale(1); }
 100% {transform: scale(1); }
}

#sidebar .icon-heartbeat .fas ,
#sidebar .icon-heartbeat .fab ,
#sidebar .icon-heartbeat .far {display:block;
color:firebrick;
width:5rem;
height:5rem;
line-height:5rem;
margin:1rem auto;
font-size:4rem;
}



/* ############################################################ */
/* | Animation mit Transition | */
/* die animation HINEINSCHIEBEN beim menü (bei mobilen auflösungen( wird in der datei datei MENUE.CSS angelegt und dort per css-transition ausgelöst  */
/* die animation DREHEN (bei mobilen auflösungen )beim menü-button (hamburger button)nach klick wird in der datei datei MENUE.CSS angelegt und dort per css-transition ausgelöst  */
/* ############################################################ */




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

/*

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

*/