<CSS3> animation

애니메이션 : frame을 이용해 동영상과 비슷한 시각효과를 주는것. 

시작 상태와 결과상태를 정하고 변화는 과정을 보여준다.

* 중요 특성 *

1. 웹 페이지 세로고침과 동시에 시작한다.

2. 동작이 끝나면 원래 상태로 돌아간다. 

* transform 은 신기능이기 때문에 벤더 프리픽스 등 크로스 브라우징을 위한 처리를 해야한다 * 

<animation 만들기> 

- HTML-

1. .html에 div .box 만들기 

-CSS-

2. 기본 속성주기

3. @keyframes : 애니메이션의 동작을 만든다. 

기본 구조 

@keyframes 이름 {

from {애니메이션 시작 상태}

to {애니메이션 끝날때 상태}

}

4. from과 to 작성하기 

아래의 예시는 X축으로 200px 간 정사각형에서 X축 400px을 가기 위한 것이다. 

-애니메이션 속성-

5. keyframe을 사용할 태그에 애니메이션 이름 알려주기

animation-name : ;

6. 실행할 시간 정하기 

animation-duration: ; 

( animation-name와 animation-duration 이 애니메이션 실행의 기본요소이다. 둘다 있어야 애니메이션이 작동한다)

7. 애니메이션 기타 속성 

1) animation-timing-function : ;  애니메이션 진행의 속도 함수. linear은 기본적인 1차함수 (y=x) 모양이다. ( linear말고 ease 등 다양한 함수가 있다) 

2) animation-delay : ; 애니메이션 시작 전에 대기시간. from의 상태에 들어가기 전의 상태로 대기한다

3) animation-iteration-count : ; 애니메이션 반복 횟수 

*대기시간을 제외한 from-to 의 횟수이다. *

8. 애니메이션 기타 속성-animation-direction : ; 

: 애니메이션의 방향 (from과 to의 실행 순서)

1) reverse : from과 to가 바뀐다. to가 시작상태, from이 끝났을때 상태

2) alternate : from-to-to-from

9. animation-play-state : ; 

running or paused : 재생 or 정지

- 응용 

10. 위 속성들을 한번에 나타낼 수 있다. 

+) 2초안에 두바퀴 돌면서 정사가형이 원으로 변하는 애니메이션. 원으로 변한 다음에는 또다시 돌면서 정사각형으로 변한다. 무한반복