@keyframes을 활용한 CSS 애니메이션

• 여러 개의 CSS 스타일을 부드럽게 전환시켜준다.
• keyframes 키워드를 활용하면 시간 순으로 정밀하게 짜여진 애니메이션을 만들 수 있다.

기본 구조

.pika {                         // 요소 지정 
	animation : 애니메이션 이름 3s ;     // 2. animation 속성 지정 (이름과 시간 필수)
}
 
  @keyframes 애니메이션이름 {       // 1. 키프레임 블록 
	0% {            
		CSS속성 : 속성값; 
	}

	50% {          
		CSS속성 : 속성값;
	}

	100% {         
		CSS속성 : 속성값;
	}
}
...
<div className='pika'></div>     // class가 pika인 요소

1. 키프레임 블록 만들기

• CSS로 키프레임 블록을 만든다.
• % 단위로 시간 진행 상태를 표시한다.
  (소수점 단위 %도 가능 / 0%는 from, 100%는 to라고 써도 된다)

Ex) 회전하는 키프레임 애니메이션

@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}
	50% {
		transform : rotate(180deg)
	}
	100% {
		transform : rotate(360deg)
	}
}

2. 요소에 animation 속성 지정

• animation을 속성으로 주고, 값으로 animation-name, animation-duration의 값을 필수로 준다.

Ex) 회전하는 키프레임 애니메이션

#logo {
	animation: lotate 3s; // animation 속성. 값으로는 애니메이션 이름과 시간 
}
...
<div id='logo'></div> 

2-1. animation 속성 따로따로 지정하기

• animation 속성을 따로따로 지정할 수도 있다.
• animation 속성에 값으로 아래 속성들을 순서대로 띄어쓰기해서 쭉 나열하면 한 번에 지정할 수도 있다.

1) animation-name(필수)

• @keyframes 블록에 작성하는 애니메이션 이름
  (보통 애니메이션의 중간 상태를 명시하는 이름으로 짓는다)

• animation 속성으로 한 번에 작성

#logo {
	animation : lotate;
}

• 따로따로 작성

#logo {
	animation-name : lotate;
}

---

2) animation-duration(필수)

• 한 싸이클의 애니메이션이 재생될 시간 지정
• 작성해주지 않으면 기본값이 0이기 때문에 애니메이션이 재생되지 않는다.

#logo {
	animation : lotate 3s;
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
}

---

3) animation-delay

• 애니메이션의 시작을 지연시킬 시간 지정

#logo {
	animation : lotate 3s 3s;
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-delay : 3s;
}

---

4) animation-direction

• 애니메이션 재생 방향을 지정

전달 가능한 값

• normal : 기본 값. 재생이 끝나면 처음부터 다시 재생.
• reverse : 역방향으로 재생.
• alternate : 순방향부터 역방향을 번갈아가며 재생.
• alternate-reverse : 역방향부터 순방향을 번갈아가며 재생.

#logo {
	animation : lotate 3s reverse;
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-direction : alternate;
}

---

5) animation-iteration-count

• 애니메이션이 몇 번 반복될지 지정

전달 가능한 값

• 기본값은 1
• infinite로 설정할 경우 무한반복
• 소수점으로 작성할 경우 재생 도중 처음 상태로 돌아감

#logo {
	animation : lotate 3s infinite;
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-iteration-count : 3; // 3번 반복
}

---

6) animation-play-state

• 애니메이션 재생 상태. 멈추거나 다시 재생 시킬 수 있음

전달 가능한 값

• running : 기본값
• pause : 애니메이션 정지

#logo {
	animation : lotate 3s pause;
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-play-state : pause;
}

7) animation-timing-function

• 애니메이션의 진행 속도를 설정
• 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정

전달 가능한 값

• linear
• ease (기본 값)
• ease-in
• ease-out
• ease-in-out

8) animation-fill-mode

• 애니메이션 재생 전 후의 상태 지정

전달 가능한 값

• none : 기본 값. 재생 중이 아닌 경우 요소의 스타일을 유지.
• forwards : 재생 중이 아닌 경우 마지막 키프레임 스타일을 유지합니다.
• backwards : 재생중이 아닌 경우 첫 번째 키프레임 스타일을 유지합니다.
• both : 재생 전에는 첫 번째 키프레임 스타일을, 재생 후에는 마지막 키프레임 스타일을 유지합니다.

---

@keyframes 중간값에 따른 애니메이션의 변화

• 아래와 같은 애니메이션을 설정했을 때

#logo {
	animation : lotate 3s infinite linear;
}

1. 중간값이 50%인 경우

@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}
	50% {
		transform : rotate(180deg)
	}
	100% {
		transform : rotate(360deg)
	}
}

2. 중간값이 80%인 경우

@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}
	80% {
		transform : rotate(180deg)
	}
	100% {
		transform : rotate(360deg)
	}
}

• 애니메이션이 재생되는 3초 중 80%인 2.4초 동안 180도 회전하고, 나머지 20%인 0.6초 동안 360도까지 회전한다.

👉🏽 @keyframes의 중간값은 애니메이션 재생 시간을 기준으로 한다!

---

styled component에서 keyframe 사용하기

1. 불러오기

import { keyframes } from 'styled-components';

2. 키프레임 블록 만들기

• animation-name을 변수명으로 해서 키프레임 블록 만들기
• 변수로 선언한 키프레임 블록이 요소에서 animation 속성 지정한 것(3번)보다 위에 있어야 한다.

const boxMove = keyframes`
0%{
  transform : rotate(0deg)
}50% {
  transform : rotate(180deg)
}100% {
  transform : rotate(360deg)
  }
`;

3. 요소에 animation 속성 지정

• 요소 지정하고 animation 속성 지정
• animation-name은 위에서 변수로 설정했으므로 ${}를 사용해 표현한다.

  img {            //  img 요소 지정
       animation: ${boxMove} 3s 0s infinite; // animation 속성 설정
       }

---

참고

애니메이션 라이브러리

• AOS(Animate On Scroll Library)