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


/* ############################################################ */
/* diese datei regelt die css-animationen  */
/* 1. animation "drehen" = angewendet auf startseite index.html sowie unterseiten bei mausberührung (hover) auf den fotos */
/* 2. animation "slide-left" = angewendet auf startseite index.html bei mausberührung (hover) auf den pfeil-icons in den bereichen 1-3  */
/* 3. animation "gummiband" = angewendet auf startseite index.html bei mausberührung (hover) auf den icons im kopfbereich (bereich-logo)  */
/* 4. animation "slide-top" = angewendet auf allen seiten bei mausberührung (hover) auf dem pfeil-icon im fussbereich */
/* 5. animation "schwingen" = angewendet auf allen unterseiten bei mausberührung (hover) auf den fotos */
/* ############################################################ */


/* ====== DREHEN ======  */

.drehen ,.drehen:hover {
-webkit-transition: all 16s ease-in-out;
transition: all 16s ease-in-out;
}

.drehen:hover , .drehen a:hover, .drehen img:hover , .drehen i:hover , .drehen span:hover {
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}

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

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


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

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

/* ====== SLIDE  Left ======  */

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


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

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





/* ====== GUMMIBAND ======  */

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

/*  mobile browser safari, chrome */
@-webkit-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);  }
}

/*  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);  }
}


/* ====== SCHWINGEN ======  */

.schwingen:hover {

-webkit-animation-name: schwingen;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-iteration-count: 1;
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);  }
}


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

/* / / / / / / / / / / / / / / / / / / / / / / code ende  / / / / / / / / / / / / / / / / / / / / / / / / */