<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*
##########################################################################

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

~~~~~~~~~~~~~~~~~~
Einbindung
~~~~~~~~~~~~~~~~~~
&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;link href="jutho_fadeIn.css" rel="stylesheet"&gt;
&lt;script src="jutho_fadeIn.js"&gt;&lt;/script&gt;

~~~~~~~~~~~~~~~~~~
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" 		=&gt; Dauer der VerzÃ¶gerung des Animations-Starts in Sekunden
data-fadeInDuration="1" 		=&gt; Dauer der Animation in Sekunden
data-fadeInTiming="ease-out"	=&gt; 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.
*/</pre></body></html>