애니메이션

요약

CSS Animation

• CSS2에서는 해당 속성이 없어 JavaScript나 플래시 등의 외부 플러그인을 이용해야 표현이 가능했다.

• 애니메이션은 요소가 로드된 이후 바로 실행된다.

• 애니메이션 속성에서 여러가지 설정을 추가하여 실행 시간대를 조절할 수 있다.

• 애니메이션의 반복 주기를 설정할 수 있다.

• CSS Vender prefix를 사용하여 브라우저별로 애니메이션을 적용할 수 있다.

CSS Animation 속성

@Keyframes

@keyframes show {
	from { opacity: 0;}
	to { opacity: 1;}
}

@keyframes hidden {
	0% { opacity: 1;}
	100% {opacity: 0;}
}

• from 키워드는 애니메이션의 첫 시작 때 가질 스타일을 명시한다.

• to 키워드는 애니메이션의 마지막에 가질 스타일을 명시한다.

• 보다 세밀한 조작이 필요한 경우에는 0~100%의 백분율을 기준으로 스타일을 지정할 수 있다.

• Keyframes의 앞에는 Vender Prefix를 추가하여 특정 브라우저만 사용할 수 있도록 구현 가능하다.

• keyframes가 동작되기 위해서는 animation-name 속성을 통해 animation과 연결해야한다.

animation-name

• 해당 속성에 keyframes을 입력해야 애니메이션을 재생할 수 있다.

• 값으로 “none”을 입력하면 애니메이션을 재생하지 않는다.
• keyframes의 이름이 none인 경우에도 마찬가지이다.

animation-duration

• 값이 0s 이하일 때엔 애니메이션이 재생되지 않는다.

• 시간을 입력할 때 초 기준일 땐 s를, 밀리초 기준일 땐 ms를 단위로 사용한다.

animation-delay

• 기본값은 0이며, 속성이 적용됨과 동시에 애니메이션을 시작한다.

• now 또한 속성 적용과 동시에 애니메이션을 시작한다.

• 1s, 100ms 등 초, 밀리 초를 입력받아 처리할 수 있다.

• 음수를 입력받은 경우, 해당 애니메이션이 음수 시간만큼 지난 이후부터 시작된다.

animation-direction

• 기본값은 normal이며, 애니메이션을 순방향으로 재생한다.

• alternate는 재생 횟수가 홀수일 땐 순방향, 짝수일 땐 역방향으로 재생한다.

• reverse는 애니메이션을 역방향으로 재생한다.

• alternate-reverse는 재생 횟수가 짝수일 땐 순방향, 홀수일 땐 역방향으로 재생한다.

• 순방향의 의미는 keyframes에서 from부터 to까지 진행되는 것을 의미한다.

• animation-timing-function 속성에서 적용되는 효과들 또한 direction의 영향을 받아 반대로 적용된다.

animation-iteration-count

• 기본값은 1이며, 설정된 횟수만큼 애니메이션을 재생한다.

• 숫자가 0 이하라면 애니메이션을 재생하지 않는다.

• 소수값을 가진다면, 소수값 비율만큼 애니메이션이 재생되다가 첫번째 프레임으로 돌아간다.

• infinite 값이 입력된다면 무한으로 애니메이션을 재생한다.

animation-play-state

• 기본값은 running이며, 애니메이션을 재생하도록 한다.

• paused 값이 입력되면 애니메이션을 정지시킨다.

animation-timing-function

• 단계별로 재생 속도를 설정한다.

• ease, ease-in, ease-out, linear 등이 있다.

• ease는 애니메이션의 중간까지 빠르게 변화하다가 마무리로 갈 수록 속도가 다시 느려진다.

• 다른 속성값들 또한 여러 효과를 가지고 있다.

animation

• animation은 (animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-play-state)의 순서를 가진다.

• ex) animation: keyframes 5s linear 0 infinite normal running

• animation 속성에서는 기본값을 가진 경우에는 생략이 가능하다.
• ex) animation: keyframes 5s linear infinite

출처