CSS - animation

animation-name : 박스모델에 적용될 애니메이션의 이름을 속성값으로 설정
animation-duration : 박스모델에 적용될 애니메이션의 지속시간을 속성값으로 설정
animation-iteration-count : 박스모델에 적용될 애니메이션의 반복횟수를 속성값으로 설정 (속성값 : 정수값 또는 infinite )
animation-direction : 박스모델에 적용될 애니메이션의 진행방향을 속성값으로 설정(속성값 : normal(기본 : 순방향), reverse(역방향), alternate(순방향 <-> 역방향)
, alternate-reverse(역방향 <-> 순방향)

@keyframes : 애니메이션의 이름과 상태에 따른 스타일 변화를 정의하기 위한 시스템 속성
상태(백분율 또는 키워드 - from, to)에 따른 CSS 스타일을 작성하여 애니메이션 효과 제공
시작상태(from)와 종료상태(to)를 포함하여 2개 이상의 상태 작성

애니메이션 내용 from 시작상태 to 종료상태로 표현
EX1

	from {
		top: 0;
		left: 10px;
		background: url("images/f1.png") no-repeat center;
	}
	to {
		top: 0;
		left: 600px;
		background: url("images/f2.png") no-repeat center;
	}
}

애니메이션 내용 0% ~100%로 표현
EX2

	0% {
		top: 0;
		left: 10px;
		background: url("images/f1.png") no-repeat center;
	}
	25% {
		top: 0;
		left: 600px;
		background: url("images/f2.png") no-repeat center;
	}
	50% {
		top: 300px;
		left: 600px;
		background: url("images/f1.png") no-repeat center;
	}
	75% {
		top: 300px;
		left: 10px;
		background: url("images/f2.png") no-repeat center;
	}
	100% {
		top: 0;
		left: 10px;
		background: url("images/f1.png") no-repeat center;
	}