/* Tile의 애니메이션 관련 파일 */

.example { /* 애니메이션 견본 */
	animation-name				: tile_down_up;	/*애니메이션 이름 */
	animation-duration			: 1.0s;				/*애니메이션 재생시간 0, 3s, 1.5s, 300ms 기본 값 0은 애니메이션 재생되지 않음.*/
	animation-iteration-count	: 0;					/*애니메이션 반복 횟수 지정, 0이면 1회임, 양수: 정수로 횟수 표기.  횟수만큼 애니메이션 반복 실행 후 정지. infinite: 무한 반복.*/
	animation-timing-function	: linear;				/*애니메이션 진행 속도 linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) 중 한가지 선택 가능*/
	animation-delay					: 0s;					/*애니메이션 지연 시간 0s, 0ms, 미지정: 지연 없이 즉시 애니메이션 시작.*/
	animation-direction			: normal;			/*애니메이션 재생 방향  normal: 정방향 재생 reverse: 역방향 재생 alternate: 정방향과 역방향으로 한 번씩 번갈아 재생(정 방향 시작) alternate-reverse: 역방향과 정방향으로 한 번씩 번갈아 재생(역방향 시작)*/
	animation-play-state			: paused;			/*애니메이션의 초기 실행 상태를 결정.  paused, running*/
	animation-fill-mode			: none;				/*애니메이션 시작 전, 종료 후 적용할 CSS 스타일을 지정. "none"은 요소의 CSS 스타일을 유지하며, 그 외에는 키프레임 애니메이션의 CSS 스타일을 유지함 none forwards backwards both*/
	/*
		none: 기본 값. 애니메이션 중이 아닌 경우, 요소의 CSS 스타일을 유지함.
		forwards: 애니메이션 중이 아닌 경우, 애니메이션 마지막 키프레임의 CSS 스타일을 유지 함.
		backwards: 애니메이션 중이 아닌 경우, 첫 번째 애니메이션 키프레임의 CSS 스타일을 유지 함.(지연 시간 포함)
		both: 애니메이션 시작 전에는 첫 번째 애니메이션 키프레임을 유지하며, 종료 후에는 마지막 키프레임 애니메이션의 CSS 스타일을 유지함. "none" 과는 다름.
		"none" 과 "backwards" 속성 값은 애니메이션 중이 아닌 경우 다른 화면을 표시할 수 있으므로 주의해야 함.
	*/
}
																																				 

.tile_down_up { /* 타일 밟으면 내려갔다 올라오기 */
	animation-name				: tile_down_up;	
	animation-duration			: 0.15s;
	animation-iteration-count	: 1;	
	animation-timing-function	: linear;	
	animation-delay					: 0s;				
	animation-direction			: normal;		
	animation-play-state			: running;		
	animation-fill-mode			: none;			
}
@keyframes tile_down_up
{
	0%
	{
		transform : translateY(0px);
	}
	40%	
	{
		transform : translateY(6px);
	}
	80%	
	{
		transform : translateY(-1px);
	}
	100%	
	{
		transform : translateY(0px);
	}
}

.tile_up { /* 특정 타일을 위로 올릴때 */
	animation-name				: tile_up;	
	animation-duration			: 0.6s;
	animation-iteration-count	: 1;	
	animation-timing-function	: linear;	
	animation-delay					: 0s;				
	animation-direction			: normal;		
	animation-play-state			: running;		
	animation-fill-mode			: forwards; /* 올라간 상태에서 머물러야 한다.  none 하면 원래데로 가버림 */			
}
@keyframes tile_up
{
	0%
	{
		transform : translateY(0px);
	}
	100%	
	{
		transform : translateY(-18px);
	}
}

.tile_dim { /*특정 타일 tile up되고 나머지 타일은 dim 처리 할때 dim처리 */
	/*opacity : 0.3;	*/
	animation-name				: tile_dim;	
	animation-duration			: 0.6s;
	animation-iteration-count	: 1;	
	animation-timing-function	: linear;	
	animation-delay					: 0s;				
	animation-direction			: normal;		
	animation-play-state			: running;		
	animation-fill-mode			: forwards; /* 올라간 상태에서 머물러야 한다.  none 하면 원래데로 가버림 */	
}
@keyframes tile_dim
{
	0%
	{
		opacity : 1.0;
	}
	100%	
	{
		opacity : 0.3;
	}
}

.tile_show { /*처음 타일 내려와서 자리 잡기  :  이거 하니깐 , 이동할때 각 tile 꿀렁 애니메이션이 안됨... 흠...  그래서 사용 안함.*/
	animation-name				: tile_show;	
	animation-duration			: 0.8s;
	animation-iteration-count	: 1;	
	animation-timing-function	: ease-in-out;	
	animation-delay					: 0s;				
	animation-direction			: normal;		
	animation-play-state			: running;		
	animation-fill-mode			: none;			
}
/* 타일 나타날때 애니메이션 */
@keyframes tile_show 
{
	0%
	{
		transform : translateY(-1080px);
	}
	100%	
	{
		transform : translateY(0px);
	}
}