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


/* ############################################################ */
/* die datei regelt die css-animationen  */
/* 1. animation SCHWINGEN + FARBÄNDERUNG DES RAHMES(BORDER)SOWIE DER SCHRIFTFARBE (bei mausberührung auf den zitat-feldern */
/* 2. animationen SLIDE-TOP, SLIDE-BOTTOM, SLIDE-LEFT, SLIDE-RIGHT, SLIDE-DIAGONAL, SLIDE-ZICKZACK (bei mausberührung auf den bildern */
/* ############################################################ */




/* ############################################################ */
/* Animation - SCHWINGEN (+ Farbänderung beim Border-Rahmen sowie Schriftfarbe)  */
/* ############################################################ */


.schwingen:hover {

-webkit-animation-name: schwingen;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-name: schwingen;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: 1;
}


@-webkit-keyframes schwingen {

25% {transform: rotate3d(0, 0, 1, 15deg);  }

45% {transform: rotate3d(0, 0, 1, -10deg); border-color:dodgerblue;color:gold;}

65% {transform: rotate3d(0, 0, 1, 5deg); border-color:steelblue;color:gold; }

85% {transform: rotate3d(0, 0, 1, -5deg);  }

to {transform: rotate3d(0, 0, 1, 0deg);  }
}

@keyframes schwingen {

25% {transform: rotate3d(0, 0, 1, 15deg);  }

45% {transform: rotate3d(0, 0, 1, -10deg); border-color:dodgerblue;color:gold; }

65% {transform: rotate3d(0, 0, 1, 5deg); border-color:steelblue;color:gold }

85% {transform: rotate3d(0, 0, 1, -5deg);  }

to {transform: rotate3d(0, 0, 1, 0deg);  }
}


/* ############################################################ */
/* Animation - SLIDE TOP  */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Verschieben nach oben */
/* Ablauf 1x bei Mausberührung */
/* Dauer: 2sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.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(-30px)  ; }
}

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


/* ############################################################ */
/* Animation - SLIDE BOTTOM */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Verschieben nach unten */
/* Ablauf 1x bei Mausberührung */
/* Dauer: 2sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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


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

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

/* ############################################################ */
/* Animation - SLIDE LEFT */
/* ############################################################ */

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

.slide-left:hover  {
-webkit-animation-name: slide-left;
-webkit-animation-duration: 2s;
-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(-20px)  ; }
}

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

/* ############################################################ */
/* Animation - SLIDE RIGHT */
/* ############################################################ */

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

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


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

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


/* ############################################################ */
/* Animation - SLIDE DIAGONAL*/
/* ############################################################ */

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

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


@-webkit-keyframes slide-diagonal  {
0% {transform: translateX(0px) translateY(0px); }
30% {transform: translateX(20px) translateY(20px) ;}
70% {transform: translateX(-20px) translateY(-20px) ; }
}

@keyframes slide-diagonal {
0% {transform: translateX(0px) translateY(0px); }
30% {transform: translateX(20px) translateY(20px) ;}
70% {transform: translateX(-20px) translateY(-20px) ; }
}

/* ############################################################ */
/* Animation - SLIDE ZICKZACK*/
/* ############################################################ */

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

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


@-webkit-keyframes slide-zickzack  {
0% {transform: translateX(0px) translateY(0px); }
30% {transform: translateX(20px) translateY(20px) ;}
70% {transform: translateX(-20px) translateY(-20px) ; }
}

@keyframes slide-zickzack {
0% {transform: translateX(0px) translateY(0px); }
20% {transform: translateX(-20px) translateY(-20px) ;}
30% {transform: translateX(40px) translateY(30px) ; }
50% {transform: translateX(-30px) translateY(10px) ; }
60% {transform: translateX(30px) translateY(-10px) ; }
70% {transform: translateX(0px) translateY(10px) ; }
}