Css Animation 애니메이션 2 - 키프레임 사용방법

css 애니메이션의 키프레임 사용법에 대해서 알아보겠다.

키프레임을 보다보면 from , to 라는 문법도 보이고, 0% , 100% 라는것도 보이기 마련이다.

from 은 애니메이션의 시작을 나타내는 부분이고

to 는 끝나는 지점을 이야기한다.

이걸 세분화하면 % 로 나눌수가 있다.

0% 아무것도 동작하지 않을때

10% 만큼 동작했을때

100% 만큼 동작했을경우로 보면된다.

키프레임을 사용하기 위해서는 해당 엘리먼트 id 값이나 class 값에 애니메이션을

지정해줘야 하는데 이를 위해서 애니메이션 이름을 지정해줘야 한다.

예를들어
 

#ety {} 라는 스타일 시트가 있다고 생각해보자

#ety{ animation-name : demo } 라고 입력하면 키프레임에 사용할 이름을 지정하게 된다.

간단히 문법을 요약해보자면