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

/* diese datei regelt die css-animationen  */


/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/* EINBLENDEN */
/* ############################################################ */


@keyframes einblenden {

from {opacity:0}
to {opacity:1}

}



/* ############################################################ */
/* | CSS KEYFRAMES Animation |
/*   fahren  */
/* da das icon von sich aus auch schon schraeg gestellt ist, haben wir es mit einem entsprechendem 'grad-wert (deg)' an die 45grad-schraege des berges angepaßt werden */
/* ############################################################ */


.ski-racer .icon-1 {
ANIMATION:fahren  8.8s  infinite ease-in;
}

.ski-racer .icon-2 {
ANIMATION:fahren  8.7s  infinite ease-in;
}

.ski-racer .icon-3 {
ANIMATION:fahren 8.4s  infinite ease-in;
}

.ski-racer .icon-4 {
ANIMATION:fahren 8s  infinite ease-in;
}

.ski-racer .icon-5 {
ANIMATION:fahren 7.9s  infinite ease-in;
}

@keyframes fahren {
0%  {transform: translateX(-1000px) rotate(-25deg) }
100%   {transform: translateX(2500px) rotate(-25deg) }
}








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

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