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

© JuTho-Agentur, www.jutho.com
Version 5, 03.04.2020

~~~~~~~~~~~~~~~~~~
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
[ gleiches gilt für .fadeOut***** ]

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)

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

.fadeOut, .fadeOutRight, .fadeOutLeft, .fadeOutTop, .fadeOutBottom, .fadeOutTopLeft, .fadeOutTopRight, .fadeOutBottomLeft, .fadeOutBottomRight {
	visibility:visible;
}

.fadeIn.animated {
	-webkit-animation-name:fadeIn;
	-moz-animation-name:fadeIn;
	-o-animation-name:fadeIn;
	animation-name:fadeIn;
}
.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;
}

.fadeOut.animated {
	-webkit-animation-name:fadeOut;
	-moz-animation-name:fadeOut;
	-o-animation-name:fadeOut;
	animation-name:fadeOut;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.fadeOutRight.animated {
	-webkit-animation-name:fadeOutRight;
	-moz-animation-name:fadeOutRight;
	-o-animation-name:fadeOutRight;
	animation-name:fadeOutRight;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.fadeOutLeft.animated {
	-webkit-animation-name:fadeOutLeft;
	-moz-animation-name:fadeOutLeft;
	-o-animation-name:fadeOutLeft;
	animation-name:fadeOutLeft;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.fadeOutTop.animated {
	-webkit-animation-name:fadeOutTop;
	-moz-animation-name:fadeOutTop;
	-o-animation-name:fadeOutTop;
	animation-name:fadeOutTop;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.fadeOutBottom.animated {
	-webkit-animation-name:fadeOutBottom;
	-moz-animation-name:fadeOutBottom;
	-o-animation-name:fadeOutBottom;
	animation-name:fadeOutBottom;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.fadeOutTopLeft.animated {
	-webkit-animation-name:fadeOutTopLeft;
	-moz-animation-name:fadeOutTopLeft;
	-o-animation-name:fadeOutTopLeft;
	animation-name:fadeOutTopLeft;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.fadeOutTopRight.animated {
	-webkit-animation-name:fadeOutTopRight;
	-moz-animation-name:fadeOutTopRight;
	-o-animation-name:fadeOutTopRight;
	animation-name:fadeOutTopRight;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.fadeOutBottomLeft.animated {
	-webkit-animation-name:fadeOutBottomLeft;
	-moz-animation-name:fadeOutBottomLeft;
	-o-animation-name:fadeOutBottomLeft;
	animation-name:fadeOutBottomLeft;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.fadeOutBottomRight.animated {
	-webkit-animation-name:fadeOutBottomRight;
	-moz-animation-name:fadeOutBottomRight;
	-o-animation-name:fadeOutBottomRight;
	animation-name:fadeOutBottomRight;
	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/*
Keyframes
*/
@-webkit-keyframes fadeIn {
	from {-webkit-transform: scale(0.01); opacity:0.01;}
	to {-webkit-transform: scale(1); opacity:1;}
}
@-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;}
}

@-webkit-keyframes fadeOut {
	from {-webkit-transform: scale(1); opacity:1;}
	to {-webkit-transform: scale(0.01); opacity:0.0;}
}
@-webkit-keyframes fadeOutRight {
	from {-webkit-transform: translate(0px, 0); opacity:1;}
	to {-webkit-transform: translate(100%, 0); opacity:0;}
}
@-webkit-keyframes fadeOutLeft {
	from {-webkit-transform: translate(0px, 0); opacity:1;}
	to {-webkit-transform: translate(-100%, 0); opacity:0;}
}
@-webkit-keyframes fadeOutTop {
	from {-webkit-transform: translate(0px, 0); opacity:1;}
	to {-webkit-transform: translate(0, -100%); opacity:0;}
}
@-webkit-keyframes fadeOutBottom {
	from {-webkit-transform: translate(0px, 0); opacity:1;}
	to {-webkit-transform: translate(0, 100%); opacity:0;}
}
@-webkit-keyframes fadeOutTopLeft {
	from {-webkit-transform: translate(0px, 0); opacity:1;}
	to {-webkit-transform: translate(-100%, -100%); opacity:0;}
}
@-webkit-keyframes fadeOutTopRight {
	from {-webkit-transform: translate(0px, 0); opacity:1;}
	to {-webkit-transform: translate(100%, -100%); opacity:0;}
}
@-webkit-keyframes fadeOutBottomLeft {
	from {-webkit-transform: translate(0px, 0); opacity:1;}
	to {-webkit-transform: translate(-100%, 100%); opacity:0;}
}
@-webkit-keyframes fadeOutBottomRight {
	from {-webkit-transform: translate(0px, 0); opacity:1;}
	to {-webkit-transform: translate(100%, 100%); opacity:0;}
}
/*####################*/
@-moz-keyframes fadeIn {
	from {-moz-transform: scale(0.01); opacity:0.01;}
	to {-moz-transform: scale(1); 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;}
}

@-moz-keyframes fadeOut {
	from {-moz-transform: scale(1); opacity:1;}
	to {-moz-transform: scale(0.01); opacity:0.0;}
}
@-moz-keyframes fadeOutRight {
	from {-moz-transform: translate(0px, 0); opacity:1;}
	to {-moz-transform: translate(100%, 0); opacity:0;}
}
@-moz-keyframes fadeOutLeft {
	from {-moz-transform: translate(0px, 0); opacity:1;}
	to {-moz-transform: translate(-100%, 0); opacity:0;}
}
@-moz-keyframes fadeOutTop {
	from {-moz-transform: translate(0px, 0); opacity:1;}
	to {-moz-transform: translate(0, -100%); opacity:0;}
}
@-moz-keyframes fadeOutBottom {
	from {-moz-transform: translate(0px, 0); opacity:1;}
	to {-moz-transform: translate(0, 100%); opacity:0;}
}
@-moz-keyframes fadeOutTopLeft {
	from {-moz-transform: translate(0px, 0); opacity:1;}
	to {-moz-transform: translate(-100%, -100%); opacity:0;}
}
@-moz-keyframes fadeOutTopRight {
	from {-moz-transform: translate(0px, 0); opacity:1;}
	to {-moz-transform: translate(100%, -100%); opacity:0;}
}
@-moz-keyframes fadeOutBottomLeft {
	from {-moz-transform: translate(0px, 0); opacity:1;}
	to {-moz-transform: translate(-100%, 100%); opacity:0;}
}
@-moz-keyframes fadeOutBottomRight {
	from {-moz-transform: translate(0px, 0); opacity:1;}
	to {-moz-transform: translate(100%, 100%); opacity:0;}
}
/*###############*/
@-o-keyframes fadeIn {
	from {-o-transform: scale(0.01); opacity:0.01;}
	to {-o-transform: scale(1); 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;}
}

@-o-keyframes fadeOut {
	from {-o-transform: scale(1); opacity:1;}
	to {-o-transform: scale(0.01); opacity:0.0;}
}
@-o-keyframes fadeOutRight {
	from {-o-transform: translate(0px, 0); opacity:1;}
	to {-o-transform: translate(100%, 0); opacity:0;}
}
@-o-keyframes fadeOutLeft {
	from {-o-transform: translate(0px, 0); opacity:1;}
	to {-o-transform: translate(-100%, 0); opacity:0;}
}
@-o-keyframes fadeOutTop {
	from {-o-transform: translate(0px, 0); opacity:1;}
	to {-o-transform: translate(0, -100%); opacity:0;}
}
@-o-keyframes fadeOutBottom {
	from {-o-transform: translate(0px, 0); opacity:1;}
	to {-o-transform: translate(0, 100%); opacity:0;}
}
@-o-keyframes fadeOutTopLeft {
	from {-o-transform: translate(0px, 0); opacity:1;}
	to {-o-transform: translate(-100%, -100%); opacity:0;}
}
@-o-keyframes fadeOutTopRight {
	from {-o-transform: translate(0px, 0); opacity:1;}
	to {-o-transform: translate(100%, -100%); opacity:0;}
}
@-o-keyframes fadeOutBottomLeft {
	from {-o-transform: translate(0px, 0); opacity:1;}
	to {-o-transform: translate(-100%, 100%); opacity:0;}
}
@-o-keyframes fadeOutBottomRight {
	from {-o-transform: translate(0px, 0); opacity:1;}
	to {-o-transform: translate(100%, 100%); opacity:0;}
}
/*#############################*/
@keyframes fadeIn {
	from {transform: scale(0.01); opacity:0.01;}
	to {transform: scale(1); 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;}
}

@keyframes fadeOut {
	from {transform: scale(1); opacity:1;}
	to {transform: scale(0.01); opacity:0.0;}
}
@keyframes fadeOutRight {
	from {transform: translate(0px, 0); opacity:1;}
	to {transform: translate(100%, 0); opacity:0.0;}
}
@keyframes fadeOutLeft {
	from {transform: translate(0px, 0); opacity:1;}
	to {transform: translate(-100%, 0); opacity:0;}
}
@keyframes fadeOutTop {
	from {transform: translate(0px, 0); opacity:1;}
	to {transform: translate(0, -100%); opacity:0;}
}
@keyframes fadeOutBottom {
	from {transform: translate(0px, 0); opacity:1;}
	to {transform: translate(0, 100%); opacity:0;}
}
@keyframes fadeOutTopLeft {
	from {transform: translate(0px, 0); opacity:1;}
	to {transform: translate(-100%, -100%); opacity:0;}
}
@keyframes fadeOutTopRight {
	from {transform: translate(0px, 0); opacity:1;}
	to {transform: translate(100%, -100%); opacity:0;}
}
@keyframes fadeOutBottomLeft {
	from {transform: translate(0px, 0); opacity:1;}
	to {transform: translate(-100%, 100%); opacity:0;}
}
@keyframes fadeOutBottomRight {
	from {transform: translate(0px, 0); opacity:1;}
	to {transform: translate(100%, 100%); opacity:0;}
}


/*
##########################################################################
########## 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.
+ Version 5: Neue Animation .fadeIn
+ Version 6: FadeOut wird ebenfalls unterstützt
*/