1. @keyframes

2개 이상의 애니메이션 중간 상태(프레임)을 지정

.box {
	width: 100px;
	background: tomato;
}

.box:hover {
	animation: ani-name 3s infinite alternate;
}
/* 3s: 3초, infinite: 무한반복, alternate: 반복 방향(반대로) */

@keyframes ani-name {
	0% { 
		legt: 100px;
		background: blue; 
	}
	50% { 
		legt: 200px; 
		background: red; 		
	}
	100% { 
		legt: 300px; 
		background: black; 
	}
}

2. Animation-name, Animation-duration (이름, 지속시간)

• animation-name: ani-name : @keyframes규칙의 이름을 지정 (기본 값 : none)
• animation-duration: 3s : 애니메이션 지속 시간 설정 (기본 값 : 0s)

3. Animtion-timing-function, Animation-delay (효과, 대기 시간)

• animation-timing-function: ease : 타이밍 함수(애니메이션 효과를 계산하는 방법) 지정

  (기본 값 : ease)

• animation-delay: 3s : 애니메이션의 대기 시간 설정 (기본 값 : 0s)

  ⚠️ 음수가 허용됩니다. 음수가 있을 경우 애니메이션은 바로 시작되지만, 그 값만큼 애니메이션이 앞서 시작합니다. (애니메이션 주기 도중에 시작. 즉, 지정된 시간 건너 뛰고 시작)

[단축속성]

animation: ani-name 1s 2 alternate 0s linear : (이름, 시간, 반복횟수, 반복방향, 대기시간, 효과)

→ 단축속성 사용 시 0s(대기 시간)을 1s(지속시간) 보다 앞에 쓰지 않도록 주의하자.

4. Animation-iteration-count (반복 횟수)

애니메이션 반복 횟수를 설정 (기본 값 : 1)

• animation-iteration-count: 1 : 1회 반복

  animation-iteration-count: infinite : 무한 반복