/******************************************************************************\
# CSS - ANIMATIONS                               #          Melodyway          #
################################################################################
#                                                #       /\           /\       #
# Teoman Deniz                                   #      /  \         /  \      #
# melodyway.app                                  # \   /    \   ^   /    \   / #
#                                                #  \ /      \ / \ /      \ /  #
# +.....................++.....................+ #   \        /   \        /   #
# : C - Melodyway       :: Create - 2025/03/28 : #  / \      / \ / \      / \  #
# :---------------------::---------------------: # /   \    /   V   \    /   \ #
# : License - BY-NC-ND4 :: Update - 2025/03/28 : #      \  /         \  /      #
# +.....................++.....................+ #       \/           \/       #
\******************************************************************************/

.ANIMATION_FADE_IN_DOWN,
.ANIMATION_FADE_OUT
{
	 -WEBKIT-ANIMATION-DURATION: 1S;
	         ANIMATION-DURATION: 1S;

	-WEBKIT-ANIMATION-FILL-MODE: BOTH;
	        ANIMATION-FILL-MODE: BOTH;
}

.ANIMATION_FADE_IN_DOWN
{
	        POINTER-EVENTS: ALL;

	-WEBKIT-ANIMATION-NAME: KEYFRAME_FADE_IN_DOWN;
	        ANIMATION-NAME: KEYFRAME_FADE_IN_DOWN;
}

.ANIMATION_FADE_OUT
{
	             POINTER-EVENTS: NONE;

	 -WEBKIT-ANIMATION-DURATION: 0.4S;
	         ANIMATION-DURATION: 0.4S;

	     -WEBKIT-ANIMATION-NAME: KEYFRAME_FADE_OUT;
	             ANIMATION-NAME: KEYFRAME_FADE_OUT;
}

.ANIMATION_FADE_IN
{
	             POINTER-EVENTS: NONE;

	 -WEBKIT-ANIMATION-DURATION: 0.4S;
	         ANIMATION-DURATION: 0.4S;

	     -WEBKIT-ANIMATION-NAME: KEYFRAME_FADE_IN;
	             ANIMATION-NAME: KEYFRAME_FADE_IN;
}

/* **************************** [v] KEYFRAME [v] **************************** */
@-WEBKIT-KEYFRAMES KEYFRAME_FADE_IN_DOWN
{
	0%
	{
		          OPACITY: 0;

		-WEBKIT-TRANSFORM: TRANSLATE3D(0, -100%, 0);
		        TRANSFORM: TRANSLATE3D(0, -100%, 0);
	}

	TO
	{
		          OPACITY: 1;

		-WEBKIT-TRANSFORM: TRANSLATEZ(0);
		        TRANSFORM: TRANSLATEZ(0);
	}
}

@KEYFRAMES KEYFRAME_FADE_IN_DOWN
{
	0%
	{
		          OPACITY: 0;

		-WEBKIT-TRANSFORM: TRANSLATE3D(0, -100%, 0);
		        TRANSFORM: TRANSLATE3D(0, -100%, 0);
	}

	TO
	{
		          OPACITY: 1;

		-WEBKIT-TRANSFORM: TRANSLATEZ(0);
		        TRANSFORM: TRANSLATEZ(0);
	}
}

@-WEBKIT-KEYFRAMES KEYFRAME_FADE_OUT
{
	0%
	{
		OPACITY: 1;
	}

	TO
	{
		OPACITY: 0;
	}
}

@KEYFRAMES KEYFRAME_FADE_OUT
{
	0%
	{
		OPACITY: 1;
	}

	TO
	{
		OPACITY: 0;
	}
}

@-WEBKIT-KEYFRAMES KEYFRAME_FADE_IN
{
	0%
	{
		OPACITY: 0;
	}

	TO
	{
		OPACITY: 1;
	}
}

@KEYFRAMES KEYFRAME_FADE_IN
{
	0%
	{
		OPACITY: 0;
	}

	TO
	{
		OPACITY: 1;
	}
}
/* **************************** [^] KEYFRAME [^] **************************** */