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


/* ############################################################ */
/* diese datei regelt die css-animationen  */
/* 1. animation "drehen" = angewendet auf den verlinkten font-icons auf startseite sowie auf unterseiten bei mausberührung (hover)*/
/* 2. animation "slide-top" = angewendet auf den font-icons im fussbereich auf allen seiten bei mausberührung (hover) */
/* 3. animation "schwingen" = angewendet auf den fotos auf allen seiten bei mausberührung (hover) */
/* dies sind die hauptanimationen evt. befindet sich je nach vorlage noch mal der code für eine mini-animation per TRANSITION direkt beim jeweiligen abschnitt */
/* ############################################################ */






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

.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) rotate(0deg); }
50% {transform: translateY(-20px) rotate(360deg); }
}

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





/* ====== 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  / / / / / / / / / / / / / / / / / / / / / / / / */