animation과 @keyframes

 

 

CSS의 animation은 스타일과 애니메이션을 적용하고, 애니메이션의 중간 상태는 @keyframes을 이용해서 변화를 준다.

 

 

 animation 

 

MDN animation

 

@keyframes

@keyframes는 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있다. 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있다. 

 

MDN keyframes

 

 

 

 

 

다음은 animation과 @keyframes를 이용해 간단히 만들어본 애니메이션이다.

 

 

 

360도 무한 회전하는 애니메이션 예제 :