@charset "UTF-8";

.ani_one {width: 100%; min-width: 1200px;
	height: 200px; padding: 0.5rem;
	background-color: #fdd;
	border:2px solid #333;}
.ani_one>.test{width: 200px; height: 200px;
	border-radius: 100%; background-color: #5cf;
	text-align: center; line-height: 200px;
	transform:translate(-250px);

	-webkit-animation-name: rotateball;
	-moz-animation-name: rotateball;
	-ms-animation-name: rotateball;
	-o-animation-name: rotateball;

/*	animation-name: rotateball;
	animation-duration: 3000ms;
	animation-iteration-count: infinite;
	animation-direction: alternate;
*/
/*줄여서.. ㅎㅎ*/
	animation:rotateball 3000ms infinite alternate;
	/*animation:rotateball 3000ms infinite alternate 100ms;*/


}
.test:hover{animation-play-state:paused;}
/*멈췃다가 움직임가능(paused->running)/ 움직엿다가 멈춤가능*/


/*@-webkit-keyframes rotateball{}
@-moz-keyframes rotateball{}
@-ms-keyframes rotateball{}
@-o-keyframes rotateball{}*/
@keyframes rotateball{
	0%{background-color: #f05;}
	50%{transform:translate(20vw,100px)rotate(720deg); 
		color: #fff; font-weight: bold;}
	100%{transform:translate(100vw) rotate(720deg);}
}

/*@keyframes rotateball{
	from{} 처음에서
	to{} 어디로가라
}*/

/*animation
animation-name: 애니메이션 기능을 수행할 이름을 만드는 곳(함수/변수)
-> 편한이름으로 작성하면된다.;
animation-duration: 한번의 흐름에 대한 수행시간;
animation-timing-function: 한번의 수행에 따른 흐름의 느낌 
-> ease, linear, ease-out, ease-in.... ;
animation-iteration-count: 반복수행
-> 1번일 경우 1/  10번의 경우 10, 무한반복시 infinite );
animation-direction: 애니메이션 수행 전/후 (한번의 수행 후 ) 방향을 어떻게 처리? 
-> normal, reverse, alternate, alternate-reverse ;
animation-delay: 애니메이션 지연시간
animation-play-state: 움직임과 일시정지 처리 / 움직이거나 멈추게하는기능;
->runnind / pause
animation-fill-mode: 애니메이션의 전/후에 처리할 값;
*/

.myani {width: 20px; height: 20px; border-radius: 100%;
	background-color: #333;
	animation: rotateball 500ms infinite alternate-reverse;}