/*
선택자{animation: 키프레임 이름, 시간, 반복 횟수}
@keyframes 키프레임 이름{
	from{시작할 CSS 속성과 값}
	to{끝날 CSS 속성과 값}
}
*/
/*
animation-name : @keyframes 이름 (예시에서는 move를 사용함)

animation-duration : 타임프레임 길이. 애니메이션 시작부터 마지막까지 총 지속시간

animation-timing-function : 애니메이션 속도 조절 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
linear : 애니메이션의 시작부터 끝까지 속도가 동일합니다.	
ease:기본 값. 애니메이션은 느리게 시작하고, 그 다음 빠르게 끝나고, 천천히 끝난다.	
eate-in : 애니메이션이 느리게 시작됩니다.	
eate-out : 애니메이션의 끝이 느립니다.	
ease-in-out : 애니메이션은 느린 시작과 느린 끝을 모두 가지고 있습니다.	
step-start : 스텝과 동등함(1, start)
step-end : 스텝과 동등(1, end)	
steps(int,start|end) : 두개의 매개 변수를 사용하여 계단 함수를 지정합니다. 첫번째 파라미터는 함수의 구간 수를 지정합니다. 양의 정수여야 합니다(0보다 큼). 선택 사항인 두번째 매개 변수는 값"시작"또는"끝"이며 간격 내에서 값이 변경되는 지점을 지정합니다. 두번째 매개 변수가 생략된 경우 값이 "끝"으로 지정됩니다.	
cubic-bezier(n,n,n,n) : 사용자 자신의 값을 Cubic-Bezier함수로 정의합니다.
가능한 값은 0부터 1까지의 숫자 값입니다.	
initial : 이 속성을 기본 값으로 설정합니다. https://www.w3schools.com/cssref/css_initial.asp
inherit : 상위 요소에서 이 속성을 포함합니다. https://www.w3schools.com/cssref/css_initial.asp

animation-delay : 애니메이션이 시작하기 전 지연시간

animation-iteration-count : 반복 횟수

animation-direction : 루프 (loop) 방향. 정방향으로 반복, 역방향으로 반복, 번갈아가며 반복 등을 설정
normal : Default value. The animation is played as normal (forwards)	
reverse : The animation is played in reverse direction (backwards)	
alternate : The animation is played forwards first, then backwards	
alternate-reverse : The animation is played backwards first, then forwards	
initial : https://www.w3schools.com/cssref/css_initial.asp
inherit : https://www.w3schools.com/cssref/css_initial.asp 

animation-fill-mode: 애니메이션 시작/끝 상태 제어 ( none | forwards | backwards | both )
*/
.go_circle{
	position:absolute;
	animation-name: move;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: normal;
}
@keyframes move {
	from{
	  top:20%;left:20%;transform:rotate(45deg);
	}
	20%{top:20%;left:60%;transform:rotate(135deg);}
	40%{top:60%;left:60%;transform:rotate(225deg);}
	60%{top:60%;left:20%;transform:rotate(315deg);}
	to{
	  top:20%;left:20%;transform:rotate(405deg);
	}
}

.feeler_movement{
	position:absolute;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: normal;
}
.feeler_movement1{
	animation-name: move_feeler1;
}
@keyframes move_feeler1 {
	0%{transform:rotate(30deg) scaleY(-1);}
	51%{transform:rotate(110deg) scaleY(-1);}
	100%{transform:rotate(30deg) scaleY(-1);}
}
.feeler_movement2{
	animation-name: move_feeler2;
}
@keyframes move_feeler2 {
	0%{transform:rotate(-70deg);}
	17%{transform:rotate(-110deg);}
	68%{transform:rotate(-30deg);}
	100%{transform:rotate(-70deg);}
}

.leg_movement{
	position:absolute;
	animation-duration: 0.3s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
}
.leg_movement1{
	animation-name: move_leg1;
}
@keyframes move_leg1 {
	0%{transform:rotate(50deg) scaleY(-1);}
	17%{transform:rotate(70deg) scaleY(-1);}
	34%{transform:rotate(90deg) scaleY(-1);}
	51%{transform:rotate(110deg) scaleY(-1);}
	68%{transform:rotate(90deg) scaleY(-1);}
	85%{transform:rotate(70deg) scaleY(-1);}
	100%{transform:rotate(50deg) scaleY(-1);}
}

.leg_movement2{
	animation-name: move_leg2;
}
@keyframes move_leg2 {
	0%{transform:rotate(150deg) scaleY(-1);}
	17%{transform:rotate(140deg) scaleY(-1);}
	34%{transform:rotate(130deg) scaleY(-1);}
	50%{transform:rotate(120deg) scaleY(-1);}
	68%{transform:rotate(130deg) scaleY(-1);}
	85%{transform:rotate(140deg) scaleY(-1);}
	100%{transform:rotate(150deg) scaleY(-1);}
}

.leg_movement3{
	animation-name: move_leg3;
}
@keyframes move_leg3 {
	0%{transform:rotate(140deg) scaleY(-1);}
	17%{transform:rotate(150deg) scaleY(-1);}
	34%{transform:rotate(160deg) scaleY(-1);}
	51%{transform:rotate(170deg) scaleY(-1);}
	68%{transform:rotate(160deg) scaleY(-1);}
	85%{transform:rotate(150deg) scaleY(-1);}
	100%{transform:rotate(140deg) scaleY(-1);}
}

.leg_movement4{
	animation-name: move_leg4;
}
@keyframes move_leg4 {
	0%{transform:rotate(-90deg);}
	17%{transform:rotate(-70deg);}
	34%{transform:rotate(-50deg);}
	51%{transform:rotate(-70deg);}
	68%{transform:rotate(-90deg);}
	85%{transform:rotate(-110deg);}
	100%{transform:rotate(-90deg);}
}

.leg_movement5{
	animation-name: move_leg5;
}
@keyframes move_leg5 {
	0%{transform:rotate(-130deg);}
	17%{transform:rotate(-140deg);}
	34%{transform:rotate(-150deg);}
	51%{transform:rotate(-140deg);}
	68%{transform:rotate(-130deg);}
	85%{transform:rotate(-120deg);}
	100%{transform:rotate(-130deg);}
}

.leg_movement6{
	animation-name: move_leg6;
}
@keyframes move_leg6 {
	0%{transform:rotate(-160deg);}
	17%{transform:rotate(-150deg);}
	34%{transform:rotate(-140deg);}
	51%{transform:rotate(-150deg);}
	68%{transform:rotate(-160deg);}
	85%{transform:rotate(-170deg);}
	100%{transform:rotate(-160deg);}
}

.pause .leg_movement{
	animation-play-state: paused;
}