CSS-Animation - @keyframes

같은 자리에서 무한으로 (infinite) 도는 animation기능이다. 

개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정 함으로써 css애니메이션 과정의 중간 절차를 제어할 수 있게 한다.  더 세밀하게 중간 동작들을 제어가 가능하다. 

keyframes 와 같은 메서드를 사용해서 어디에서 어디로(from - to) 어떤 모양에서 어떤 모양으로 이동할 지 정해준다. 

---

@keyframes 문법

@keyframes name {

0% { ... }

n% { ... }

100% { ... }

}

• name : 애니메이션의 이름을 정합니다.
• 0% : 시작할 때의 모양을 정합니다. 0% 대신 from을 사용해도 됩니다.
• n% : n%일 때의 모양을 정합니다.
• 100% : 끝날 때의 모양을 정합니다. 100% 대신 to를 사용해도 됩니다.

 

---

예시

See the Pen Untitled by dahye (@dahyekim0311) on CodePen.