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

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


/* ====== BEBEN ======  */

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


@-webkit-keyframes beben {
0% { transform: rotate(0deg) translate(2px, 1px); }
10% { transform: rotate(2deg) translate(1px, 2px); }
20% { transform: rotate(-2deg) translate(3px, 0px) ; }
30% { transform: rotate(0deg) translate(0px, -2px); }
40% { transform: rotate(-2deg) translate(-1px, 1px); }
50% { transform: rotate(2deg) translate(1px, -2px); }
60% { transform: rotate(0deg) translate(3px, -1px); }
70% { transform: rotate(2deg) translate(-2px, -1px); }
80% { transform: rotate(-2deg) translate(1px, 1px); }
90% { transform: rotate(0deg) translate(-2px, -2px); }
100% { transform: rotate(2deg) translate(-1px, 2px); }
}


@keyframes beben {
0% { transform: rotate(0deg) translate(2px, 1px); }
10% { transform: rotate(2deg) translate(1px, 2px); }
20% { transform: rotate(-2deg) translate(3px, 0px) ; }
30% { transform: rotate(0deg) translate(0px, -2px); }
40% { transform: rotate(-2deg) translate(-1px, 1px); }
50% { transform: rotate(2deg) translate(1px, -2px); }
60% { transform: rotate(0deg) translate(3px, -1px); }
70% { transform: rotate(2deg) translate(-2px, -1px); }
80% { transform: rotate(-2deg) translate(1px, 1px); }
90% { transform: rotate(0deg) translate(-2px, -2px); }
100% { transform: rotate(2deg) translate(-1px, 2px); }
}


/* ====== UMKIPPEN ======  */

.kippen:hover {
-webkit-animation-name: kippen;
-webkit-animation-duration: 0.4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-fill-mode:forwards;
animation-name: kippen;
animation-duration: 0.4s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-fill-mode:forwards;

}

@-webkit-keyframes kippen  {
0% {transform:rotate(0deg);}
100% {transform:rotate(90deg);}
}

@keyframes kippen  {
0% {transform:rotate(0deg);}
100% {transform:rotate(90deg);}

}

/* ====== EINBLENDEN  ======  */


.einblenden {
-webkit-animation-name: einblenden;
-webkit-animation-duration: 44s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
animation-name: einblenden;
animation-duration: 4s;
animation-iteration-count: 1;
animation-timing-function: linear;

}

@-webkit-keyframes einblenden {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes einblenden {
0% { opacity: 0; }
100% { opacity: 1; }
}

/* ====== SLIDE RIGHT (VERSCHIEBEN NACH RECHTS)  ======  */

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

}

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

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





/* ====== DREHUNG  ======  */

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

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

/* ====== SLIDE  TOP (VERSCHIEBEN NACH OBEN ======  */

.slide-top , .slide-top:hover {
-webkit-animation-name: slide-top;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-name: slide-top;
animation-duration: 4s;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-delay: 0s;
}


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

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


/* / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / */