/* = = = = = = = = = = = = = = = = = 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-4  */
/* 3. animation slide-top plus slide-left = angewendet auf startseite index.html bei mausberührung (hover) auf den social media icons in bereich4  */
/* ############################################################ */


/* ====== 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(2000deg);
transform: rotate(2000deg);
}

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

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


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

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

/* ====== 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: translateY(0px);}
50% {transform: translateY(-30px);}
}

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



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