[CSS3] Animation

CSS Animations 은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링 됩니다.

브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다.

 

// 예시 코드

animation: sprite-ani 1s infinite steps(17);

/*
    animation-duration: 1s;
    animation-timing-function: steps(17);
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: sprite-ani;
*/

 

animation 속성 

animation-duration : 애니메이션의 얼마의 걸쳐 일어날지 결정하는 속도

animation-timing-function : 중간 상태의 전환을 어떤 간격으로 진행할 지 결정합니다.

* sprite 이미지의 경우 해당 stpes(length) 을 사용하면 연속되는 애니메이션을 각각의 스텝으로 잘라서 보일 수 있게 한다.

animation-delay : 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될 지 결정합니다.

animation-iteration-count : 애니메이션의 반복 횟수를 결정. infinite로 지정하면 무한히 반복될 수 있습니다.

animation-direction : 애니메이션이 종료되고 어떤 방향으로 진행될 지 결정합니다. 

animation-fill-mode : 애니메이션이 끝난 후의 상태를 설정합니다.

* forwards 로 설정할 경우 애니메이션이 끝난 후 그 지점에 그대로 있게 됩니다.

animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있습니다.

animation-name : 애니메이션의 이름을 지정하고, 상태는 @keyframes 규칙을 이용하여 기술합니다.

 

 

animation-duration

기본 Time	0s
속성	initial
상속	부모 요소에서 이 속성을 상속
CSS Syntax	time | initial | inherit

animation-timing-function

기본 값	ease
상속	NO
애니메이션	NO
버전	CSS3
Javascript Syntax	object.style.animationTimingFunction = 'linear'
Property Values	linear | ease | ease-in | ease-out | ease-in-out | steps | cubic-bezier | step-start | step-end | initial | inherit

animation-delay

기본 Time	0s
상속	NO
애니메이션	NO
버전	CSS3
Javascript Syntax	object.style.animationDelay = '1s'
CSS Syntax	time | initial | inherit

animation-iteration-count 

기본 값	1번 실행
상속	NO
애니메이션	NO
버전	CSS3
Javascript Syntax	object.style.animationIterationCount= 'infinite'
Property Values	number | infinite | initial | inherit

animation-direction 

기본 값	normal
상속	NO
애니메이션	NO
버전	CSS3
Javascript Syntax	object.style.animationDirection= 'reverse'
Property Values	normal | reverse | alternate | alternate-reverse | initial | inherit

animation-fill-mode 

기본 값	none
상속	NO
애니메이션	NO
버전	CSS3
Javascript Syntax	object.style.animationFillMode= 'forwards'
Property Values	none | forwards | backwards | both | initial | inherit

animation-play-state

기본 값	running
상속	NO
애니메이션	NO
버전	CSS3
Javascript Syntax	object.style.animationPlayState= 'paused'
Property Values	running | paused | initial | inherit