/*
##########################################################################

© JuTho-Agentur, www.jutho.com
Version 4, 03.05.2016

~~~~~~~~~~~~~~~~~~
Einbindung
~~~~~~~~~~~~~~~~~~
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="jutho_fadeIn.css" rel="stylesheet">
<script src="jutho_fadeIn.js"></script>

~~~~~~~~~~~~~~~~~~
Definition
~~~~~~~~~~~~~~~~~~
Die "einfliegenden" Elemente müssen lediglich mit einer der folgenden 
Klassen belegt werden
.fadeInRight, .fadeInLeft, .fadeInTop, .fadeInBottom, .fadeInTopLeft, 
.fadeInTopRight, .fadeInBottomLeft, .fadeInBottomRight

Zusätzlich kann (muss aber nicht) auf den Elementen mit data-Attributen 
gearbeitet werden, um die Flugeigenschaften zu verändern:
data-fadeInTimeout="2" 		=> Dauer der Verzögerung des Animations-Starts in Sekunden
data-fadeInDuration="1" 		=> Dauer der Animation in Sekunden
data-fadeInTiming="ease-out"	=> CSS-Timing-Angaben (http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp)

##########################################################################
*/
.fadeInRight, .fadeInLeft, .fadeInTop, .fadeInBottom, .fadeInTopLeft, .fadeInTopRight, .fadeInBottomLeft, .fadeInBottomRight {
	visibility:hidden;
}

.fadeInRight.animated {
	-webkit-animation-name:fadeInRight;
	-moz-animation-name:fadeInRight;
	-o-animation-name:fadeInRight;
	animation-name:fadeInRight;
}
.fadeInLeft.animated {
	-webkit-animation-name:fadeInLeft;
	-moz-animation-name:fadeInLeft;
	-o-animation-name:fadeInLeft;
	animation-name:fadeInLeft;
}
.fadeInTop.animated {
	-webkit-animation-name:fadeInTop;
	-moz-animation-name:fadeInTop;
	-o-animation-name:fadeInTop;
	animation-name:fadeInTop;
}
.fadeInBottom.animated {
	-webkit-animation-name:fadeInBottom;
	-moz-animation-name:fadeInBottom;
	-o-animation-name:fadeInBottom;
	animation-name:fadeInBottom;
}
.fadeInTopLeft.animated {
	-webkit-animation-name:fadeInTopLeft;
	-moz-animation-name:fadeInTopLeft;
	-o-animation-name:fadeInTopLeft;
	animation-name:fadeInTopLeft;
}
.fadeInTopRight.animated {
	-webkit-animation-name:fadeInTopRight;
	-moz-animation-name:fadeInTopRight;
	-o-animation-name:fadeInTopRight;
	animation-name:fadeInTopRight;
}
.fadeInBottomLeft.animated {
	-webkit-animation-name:fadeInBottomLeft;
	-moz-animation-name:fadeInBottomLeft;
	-o-animation-name:fadeInBottomLeft;
	animation-name:fadeInBottomLeft;
}
.fadeInBottomRight.animated {
	-webkit-animation-name:fadeInBottomRight;
	-moz-animation-name:fadeInBottomRight;
	-o-animation-name:fadeInBottomRight;
	animation-name:fadeInBottomRight;
}

/*
Keyframes
*/
@-webkit-keyframes fadeInRight {
	from {-webkit-transform: translate(100%, 0); opacity:0.5;}
	to {-webkit-transform: translate(0px, 0); opacity:1;}
}
@-webkit-keyframes fadeInLeft {
	from {-webkit-transform: translate(-100%, 0); opacity:0.5;}
	to {-webkit-transform: translate(0px, 0); opacity:1;}
}
@-webkit-keyframes fadeInTop {
	from {-webkit-transform: translate(0, -100%); opacity:0.5;}
	to {-webkit-transform: translate(0px, 0); opacity:1;}
}
@-webkit-keyframes fadeInBottom {
	from {-webkit-transform: translate(0, 100%); opacity:0.5;}
	to {-webkit-transform: translate(0px, 0); opacity:1;}
}
@-webkit-keyframes fadeInTopLeft {
	from {-webkit-transform: translate(-100%, -100%); opacity:0.5;}
	to {-webkit-transform: translate(0px, 0); opacity:1;}
}
@-webkit-keyframes fadeInTopRight {
	from {-webkit-transform: translate(100%, -100%); opacity:0.5;}
	to {-webkit-transform: translate(0px, 0); opacity:1;}
}
@-webkit-keyframes fadeInBottomLeft {
	from {-webkit-transform: translate(-100%, 100%); opacity:0.5;}
	to {-webkit-transform: translate(0px, 0); opacity:1;}
}
@-webkit-keyframes fadeInBottomRight {
	from {-webkit-transform: translate(100%, 100%); opacity:0.5;}
	to {-webkit-transform: translate(0px, 0); opacity:1;}
}
/*####################*/
@-moz-keyframes fadeInRight {
	from {-moz-transform: translate(100%, 0); opacity:0.5;}
	to {-moz-transform: translate(0px, 0); opacity:1;}
}
@-moz-keyframes fadeInLeft {
	from {-moz-transform: translate(-100%, 0); opacity:0.5;}
	to {-moz-transform: translate(0px, 0); opacity:1;}
}
@-moz-keyframes fadeInTop {
	from {-moz-transform: translate(0, -100%); opacity:0.5;}
	to {-moz-transform: translate(0px, 0); opacity:1;}
}
@-moz-keyframes fadeInBottom {
	from {-moz-transform: translate(0, 100%); opacity:0.5;}
	to {-moz-transform: translate(0px, 0); opacity:1;}
}
@-moz-keyframes fadeInTopLeft {
	from {-moz-transform: translate(-100%, -100%); opacity:0.5;}
	to {-moz-transform: translate(0px, 0); opacity:1;}
}
@-moz-keyframes fadeInTopRight {
	from {-moz-transform: translate(100%, -100%); opacity:0.5;}
	to {-moz-transform: translate(0px, 0); opacity:1;}
}
@-moz-keyframes fadeInBottomLeft {
	from {-moz-transform: translate(-100%, 100%); opacity:0.5;}
	to {-moz-transform: translate(0px, 0); opacity:1;}
}
@-moz-keyframes fadeInBottomRight {
	from {-moz-transform: translate(100%, 100%); opacity:0.5;}
	to {-moz-transform: translate(0px, 0); opacity:1;}
}
/*###############*/
@-o-keyframes fadeInRight {
	from {-o-transform: translate(100%, 0); opacity:0.5;}
	to {-o-transform: translate(0px, 0); opacity:1;}
}
@-o-keyframes fadeInLeft {
	from {-o-transform: translate(-100%, 0); opacity:0.5;}
	to {-o-transform: translate(0px, 0); opacity:1;}
}
@-o-keyframes fadeInTop {
	from {-o-transform: translate(0, -100%); opacity:0.5;}
	to {-o-transform: translate(0px, 0); opacity:1;}
}
@-o-keyframes fadeInBottom {
	from {-o-transform: translate(0, 100%); opacity:0.5;}
	to {-o-transform: translate(0px, 0); opacity:1;}
}
@-o-keyframes fadeInTopLeft {
	from {-o-transform: translate(-100%, -100%); opacity:0.5;}
	to {-o-transform: translate(0px, 0); opacity:1;}
}
@-o-keyframes fadeInTopRight {
	from {-o-transform: translate(100%, -100%); opacity:0.5;}
	to {-o-transform: translate(0px, 0); opacity:1;}
}
@-o-keyframes fadeInBottomLeft {
	from {-o-transform: translate(-100%, 100%); opacity:0.5;}
	to {-o-transform: translate(0px, 0); opacity:1;}
}
@-o-keyframes fadeInBottomRight {
	from {-o-transform: translate(100%, 100%); opacity:0.5;}
	to {-o-transform: translate(0px, 0); opacity:1;}
}
/*#############################*/
@keyframes fadeInRight {
	from {transform: translate(100%, 0); opacity:0.5;}
	to {transform: translate(0px, 0); opacity:1;}
}
@keyframes fadeInLeft {
	from {transform: translate(-100%, 0); opacity:0.5;}
	to {transform: translate(0px, 0); opacity:1;}
}
@keyframes fadeInTop {
	from {transform: translate(0, -100%); opacity:0.5;}
	to {transform: translate(0px, 0); opacity:1;}
}
@keyframes fadeInBottom {
	from {transform: translate(0, 100%); opacity:0.5;}
	to {transform: translate(0px, 0); opacity:1;}
}
@keyframes fadeInTopLeft {
	from {transform: translate(-100%, -100%); opacity:0.5;}
	to {transform: translate(0px, 0); opacity:1;}
}
@keyframes fadeInTopRight {
	from {transform: translate(100%, -100%); opacity:0.5;}
	to {transform: translate(0px, 0); opacity:1;}
}
@keyframes fadeInBottomLeft {
	from {transform: translate(-100%, 100%); opacity:0.5;}
	to {transform: translate(0px, 0); opacity:1;}
}
@keyframes fadeInBottomRight {
	from {transform: translate(100%, 100%); opacity:0.5;}
	to {transform: translate(0px, 0); opacity:1;}
}



/*
##########################################################################
########## Versionshistorie:
##########################################################################

+ Version 3: Cross-Browser-Unterstützung nachgerüstet
+ Version 4: Animations-Start noch vor dem Scrollen, wenn Elemente innerhalb des Viewports. data-fadeInTimeout Attribut eingeführt.
*/