[data-animation="fade"]{
	opacity: 0;
	/*transform: translate(100%);*/
	transition:.9s cubic-bezier(.68,-0.55,.27,1.55) .1s;

	--opacity:1;
	--transform:translate(0);
}

[data-animation="fadeAndTranslate"]{
	opacity: 0;
	transform: translate(20%);
	transition:.9s cubic-bezier(.68,-0.55,.27,1.55) ;

	--opacity:1;
	--transform:translate(0);
}

[data-animation="fadeAndTranslateLeft"]{
	opacity: 0;
	transform: translate(-20%);
	transition:.9s cubic-bezier(.68,-0.55,.27,1.55) ;

	--opacity:1;
	--transform:translate(0);
}


[data-animation="scale"]{
	opacity: 0;
	transform: scale(5);
	transition:4s cubic-bezier(.68,-0.55,.27,1.55) .1s;

	--opacity:1;
	--transform:scale(1);
}

[data-animation="show"]{
	opacity: 0;
	transform: scale(0);
	transition:.8s cubic-bezier(.68,-0.55,.27,1.55) .1s;

	--opacity:1;
	--transform:scale(1);
}

[data-animation="up"]{
	opacity: 0;
	transform: translateY(100%);
	transition:1s ease-out .1s;

	--opacity:1;
	--transform:translateY(0);
}


[data-animation="up01"]{
	opacity: 0;
	transform: translateY(100%);
	transition:1s ease-out .1s;

	--opacity:1;
	--transform:translateY(0);
}

[data-animation="up02"]{
	opacity: 0;
	transform: translateY(100%);
	transition:1s ease-out .3s;

	--opacity:1;
	--transform:translateY(0);
}

[data-animation="up03"]{
	opacity: 0;
	transform: translateY(100%);
	transition:1s ease-out .5s;

	--opacity:1;
	--transform:translateY(0);
}

[data-animation="up04"]{
	opacity: 0;
	transform: translateY(100%);
	transition:1s ease-out .7s;

	--opacity:1;
	--transform:translateY(0);
}

[data-animation="up05"]{
	opacity: 0;
	transform: translateY(100%);
	transition:1s ease-out .9s;

	--opacity:1;
	--transform:translateY(0);
}

[data-animation="dawn01"]{
	opacity: 0;
	transform: translateY(-100%);
	transition:1s ease-out .1s;

	--opacity:1;
	--transform:translateY(0);
}
[data-animation="dawn02"]{
	opacity: 0;
	transform: translateY(-100%);
	transition:1s ease-out .3s;

	--opacity:1;
	--transform:translateY(0);
}
[data-animation="dawn03"]{
	opacity: 0;
	transform: translateY(-100%);
	transition:1s ease-out .5s;

	--opacity:1;
	--transform:translateY(0);
}

[data-animation="dawn04"]{
	opacity: 0;
	transform: translateY(-100%);
	transition:1s ease-out .7s;

	--opacity:1;
	--transform:translateY(0);
}

[data-animation="dawn05"]{
	opacity: 0;
	transform: translateY(-100%);
	transition:1s ease-out .7s;

	--opacity:1;
	--transform:translateY(0);
}


.animate{
	opacity: var(--opacity);
	transform: var(--transform);
}