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

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

/*
Animation HEARTBEAT  ( CSS-Name: pulse-ani)| startet automatisch
Animation ROTATION + VERKLEINERT UNSICHTBAR ( CSS-Name: rotate-scale-small )
Animation ZOOM-IN + ROTATION, Vergrösserung läuft innerhalb der Box ab ( CSS-Name: scale-rotate , scale-rotate2 )
Animation SCALE, vergrössern ( CSS-Name: bigscale  )
Animation PERSPEKTIVISCHES WENDEN auf X und Y-Ebene ( CSS-Name: flip - perspektiv )
Animation PERSPEKTIVISCHES WENDEN auf Y-Ebene ( CSS-Name: wenden )
Animation PERSPEKTIVISCHES WENDEN auf X-Ebene ( CSS-Name: wenden2 )
Animation SLIDE-RIGHT  + FARBÄNDERUNG ICON ( CSS-Name: slide-right )
Animation GUMMIBAND  ( CSS-Name: gummi )
Animation DREHEN, schnell ( CSS-Name: drehen )
Animation DREHEN, langsam ( CSS-Name: drehen2 )
Animation DREHEN + VERKLEINERN ( CSS-Name: drehen-verkleinern )
Animation POSITIONSÄNDERUNG HINTERGRUNDBILD ( CSS-Name: backposmovie-1 | startet automatisch )
Animation BLITZEN ( CSS-Name: blitzen | startet automatisch )
*/




/* ############################################################ */



/* ############################################################ */
/* blitzen */
/* ############################################################ */

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


/* Ablauf unendlich , automatisch bei Start */
/* Dauer: 20sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.blitzen {
-webkit-animation-name: blitzen;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

animation-name: blitzen;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

@-webkit-keyframes blitzen {
0%{ opacity: 1; color:black; }
70%{ opacity: 1; color:black; }
71% { opacity: 0; color:white; }
73% { opacity: 1; color:black; }
}

@keyframes blitzen {
0%{ opacity: 1; color:black; }
70%{ opacity: 1; color:black; }
71% { opacity: 0; color:white; }
73% { opacity: 1; color:black; }
}







/* ############################################################ */
/* backposmovie-1 */
/* ############################################################ */

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


/* Ablauf unendlich , automatisch bei Start */
/* Dauer: 50sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.backposmovie-1 {
-webkit-animation: backposmovie-1 50s infinite linear;
animation: backposmovie-1 50s infinite linear;
}

@-webkit-keyframes backposmovie-1 {
0% {background-position:50% 50%;}
50% {background-position:100% 0%;}
100% {background-position:50% 50%;}
}


@keyframes backposmovie-1 {
0% {background-position:50% 50%;}
50% {background-position:100% 0%;}
100% {background-position:50% 50%;}
}




/* ############################################################ */
/* Animation | rotate-scale-small */
/* ############################################################ */


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


/* Ablauf 1x bei Mausberührung*/
/* Dauer: 4sek */

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

 .rotate-scale-small {transition: transform  4s ease ;
transform: rotate(0deg) scale(1) ;
}

 .rotate-scale-small:hover {color:red;
transform: rotate(45deg) scale(0) ;
}






/* ############################################################ */
/* Animation | bigscale (Vergrössern mit scale - (Wert 1= mittel, darunter verkleinert, darüber vergrössert*/
/* ############################################################ */

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

/* Ablauf 1x bei Mausberührung*/
/* Dauer: 0.8sek */

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

.bigscale {
-webkit-transition: all .8s ease-out;
transition: all .8s ease-out;
}

.bigscale:hover {z-index:1;
-webkit-transform:scale(1.2);
transform:scale(1.2) ;
}

/* ############################################################ */
/* Animation | scale - rotate (Vergrössern / Drehen */
/* ############################################################ */

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

/* Ablauf 1x bei Mausberührung*/
/* Dauer: 1sek */

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

.scale-rotate {
-webkit-transition: all 1s ease-out;
transition: all 1s  ease-out;
}

.scale-rotate:hover {
-webkit-transform:scale(2.5)  rotate(-45deg);
transform:scale(2.5)  rotate(-15deg);
}

/* ############################################################ */
/* Animation | scale - rotate 2 (Vergrössern / Drehen */
/* ############################################################ */

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

/* Ablauf 1x bei Mausberührung*/
/* Dauer: 1sek */

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

.scale-rotate2 {
-webkit-transition: all 1s ease-out;
transition: all 1s  ease-out;
}

.scale-rotate2:hover {
-webkit-transform:scale(2.5)  rotate(-45deg);
transform:scale(2.5)  rotate(50deg);
}



/* ############################################################ */
/* Animation | flip - perspektiv */
/* ############################################################ */

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

/* Ablauf 1x bei Mausberührung*/
/* Dauer: 7sek */

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

.flip-perspektiv {
-webkit-transition: all 7s ease-out;
transition: all 7s ease-out;
}

.flip-perspektiv:hover {
-webkit-transform:perspective(800px) rotateX(-660deg) rotateY(-360deg);
transform:perspective(800px) rotateX(-660deg) rotateY(-360deg);
}


/* ############################################################ */
/* WENDEN */
/* ############################################################ */

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


/* Ablauf 5 x , automatisch bei Start */
/* Dauer: 10sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.wenden {
-webkit-animation: wenden 10s 5 ;
animation: wenden 10s 5;
}



@-webkit-keyframes wenden {
   0% {-webkit-transform:perspective(1000px) rotateY(0deg)}
   100% {-webkit-transform:perspective(1000px) rotateY(360deg)}
}



@keyframes wenden {
   0% {transform:perspective(1000px) rotateY(0deg)}
   100% {transform:perspective(1000px) rotateY(360deg)}

}



/* ############################################################ */
/* WENDEN 2 */
/* ############################################################ */

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

/* Ablauf unendlich bei Mausberührung*/
/* Dauer: 20sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.wenden2:hover {
}


@-webkit-keyframes wenden2 {
   0% {-webkit-transform:perspective(1000px) rotateY(0deg)}
   25% {-webkit-transform:perspective(1000px) rotateY(90deg)}
   50% {-webkit-transform:perspective(1000px) rotateY(180deg)}
   75% {-webkit-transform:perspective(1000px) rotateY(-270deg)}
   100% {-webkit-transform:perspective(1000px) rotateY(360deg)}
}



@keyframes wenden2 {
   0% {transform:perspective(1000px) rotateX(0deg)}
   25% {transform:perspective(1000px) rotateX(90deg)}
   50% {transform:perspective(1000px) rotateX(180deg)}
   75% {transform:perspective(1000px) rotateX(-270deg)}
   100% {transform:perspective(1000px) rotateX(-360deg)}
}



/* ############################################################ */
/* Animation | GUMMIBAND */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Ablauf 1x bei Mausberührung */
/* Dauer: 3sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.gummi:hover {
-webkit-animation: gummi 3s linear 1;
animation: gummi 3s linear 1;
}

/*  mobile browser safari, chrome */
@-webkit-keyframes gummi {
from {transform: scale3d(1, 1, 1);}

30% {-webkit-transform: scale3d(1.25, 0.5, 1);}

40% {-webkit-transform: scale3d(0.75, 1.25, 1);}

50% {-webkit-transform: scale3d(1.15, 0.85, 1);}

65% {-webkit-transform: scale3d(.95, 1.05, 1);}

75% {-webkit-transform: scale3d(1.05, .95, 1);}

to {-webkit-transform: scale3d(1, 1, 1);  }
}

/*  andere browser */
@keyframes gummi {
from {transform: scale3d(1, 1, 1);}

30% {transform: scale3d(1.25, 0.5, 1);}

40% {transform: scale3d(0.75, 1.25, 1);}

50% {transform: scale3d(1.15, 0.85, 1);}

65% {transform: scale3d(.95, 1.05, 1);}

75% {transform: scale3d(1.05, .95, 1);}

to {transform: scale3d(1, 1, 1);  }
}

/* ... bei mouseout langsam zurück in ausgangszustand und nicht abrupt */
.gummi {
-webkit-transition: all 3s ease-out;
transition: all 3s ease-out;
}






/* ############################################################ */
/* Animation | drehen  */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 360GRAD-Drehung nach rechts */
/* Ablauf 3x bei Mausberührung */
/* Dauer: 0.8sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.drehen {
-webkit-transition: all .8s ease-out;
transition: all .8s ease-out;
}

.drehen:hover {
-webkit-transform:rotate(1080deg);
transform:rotate(1080deg);
}


/* ############################################################ */
/* Animation | drehen 2 */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 360GRAD-Drehung nach rechts */
/* Ablauf 1x bei Mausberührung */
/* Dauer: 2.8sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.drehen2 {
-webkit-transition: all 2.8s ease-out;
transition: all 2.8s ease-out;
}

.drehen2:hover {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}


/* ############################################################ */
/* Animation | drehen + verkleinern */
/* ############################################################ */

.drehen-verkleinern {
-webkit-transition: all 1.1s ease-out;
transition: all 1.1s ease-out;
}

.drehen-verkleinern:hover {
-webkit-transform:rotate(360deg)scale(0.5);
transform:rotate(360deg)scale(0.5);
}




/* ############################################################ */
/* Animation | slide-right  */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Verschieben nach rechts */
/* Ablauf 1x bei Mausberührung */
/* Dauer: 0.6sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.slide-right:hover  {
-webkit-animation-name: slide-right;
-webkit-animation-duration: .6s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
animation-name: slide-right;
animation-duration: .6s;
animation-iteration-count: 1;
animation-timing-function: linear;
}


@-webkit-keyframes slide-right  {
0% {-webkit-transform: translateX(0px) ; }
50% {-webkit-transform: translateX(50px)  ; }
}

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

/* ... bei mouseout langsam zurück in ausgangszustand und nicht abrupt */
.slide-right {
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}



/* ############################################################ */
/* Animation | HEARTBEAT   */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Ablauf unendlich , automatisch bei Start */
/* Dauer: 3sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



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

}

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

@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); }
}