.cruddy-element-effect
{
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	opacity: 0;
}

.cruddy-element-effect-slide-left
{
	animation-name: anim-cruddy-element-effect-slide-left;
}

.cruddy-element-effect-slide-right
{
	animation-name: anim-cruddy-element-effect-slide-right;
}

.cruddy-element-effect-slide-top
{
	animation-name: anim-cruddy-element-effect-slide-top;
}

.cruddy-element-effect-slide-bottom
{
	animation-name: anim-cruddy-element-effect-slide-bottom;
}

.cruddy-element-effect-zoom-in
{
	animation-name: anim-cruddy-element-effect-zoom-in;
}

.cruddy-element-effect-zoom-out
{
	animation-name: anim-cruddy-element-effect-zoom-out;
}

.cruddy-element-effect-fade-in
{
	animation-name: anim-cruddy-element-effect-fade-in;
}

@keyframes anim-cruddy-element-effect-slide-left
{
	from
	{
		transform: translateX(20%);
		opacity: 0;
	}
	
	to
	{
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes anim-cruddy-element-effect-slide-right
{
	from
	{
		transform: translateX(-20%);
		opacity: 0;
	}
	
	to
	{
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes anim-cruddy-element-effect-slide-top
{
	from
	{
		transform: translateY(20%);
		opacity: 0;
	}
	
	to
	{
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes anim-cruddy-element-effect-slide-bottom
{
	from
	{
		transform: translateY(-20%);
		opacity: 0;
	}
	
	to
	{
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes anim-cruddy-element-effect-zoom-in
{
	from
	{
		opacity: 1;
		transform: scale(0);
	}
	
	to
	{
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes anim-cruddy-element-effect-zoom-out
{
	from
	{
		opacity: 1;
		transform: scale(1.5);
	}
	
	to
	{
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes anim-cruddy-element-effect-fade-in
{
	from
	{
		opacity: 0;
	}
	
	to
	{
		opacity: 1;
	}
}