CSS animation
-
CSS로 개발된 애니메이션은 작고 독립적인 사용자 인터페이스 요소가 있는 애플리케이션에 적합하다.
-
도구 설명을 표시하거나 측면에서 탐색 메뉴를 가져오는 데 사용할 수 있다.
-
Web-Kit기반 브라우저에서만 작동하지만 요즘 대부분의 데스크톱 및 모바일 브라우저는Web-kit기반이라 괜춘하다. -
이는 디자인에 움직임을 가져오는 가장 쉬운 방법이며 원하는 동작과 발생 횟수를 제어할 수 있다.
transition
-
transition을 사용하면 상태가 변경될 때마다 요소의 모양과 동작을 변경할 수 있다.
-
변경은 지정된 기간 동안 발생하며 마우스 오버, 포커스, 활성 또는 대상 지정과 같은 이벤트에 의해 트리거된다.
-
transition은 상태가 변경되고 각 상태에 대해 서로 다른 스타일을 식별해야 한다.
-
transition은 한 상태에서 다른 상태로 시각적으로 변경하는 데 큰 역할을 하므로
단일 상태 변경이 필요할 때 적합하다.
@keyframe
-
바로 앞에서 언급한 transition과는 다르게
복수 상태, 더 많은 제어가 필요할 땐 @keyframe을 사용해야한다. -
@keyframe은 CSS animation의 기초이며 부드럽고 유지보수가 편한 animation을 만들 수 있도록 해주며 굉장히 많은 양의 코드(reams of script)를 필요로 하지도 않는다.
-
또한 각 단계별로 animation이 작동하는 방식을 정의할 수 있다.
@keyframe 구성요소
- 애니메이션 이름: 애니메이션을 설명하는 이름
- 애니메이션 단계: 애니메이션의 각 단계는 백분율로 표시
애니메이션의 시작 상태는 0%로 표시되고 100%는 종료 상태를 나타냄.
그 사이에 여러 중간 상태를 추가할 수 있다. - CSS property: animation timeline의 각 단계에 대해 정의된 CSS 속성.
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(-360deg);
}
}@keyframe 의 사용
.box:hover img:nth-child(2){
animation: spin 40s infinite linear;
}transition VS animation
트랜지션(Transition)
- 요소의 변화를 일정 기간(duration)동안 일어나게 함
- hover나 click 같은 이벤트 트리거에 의해 동작
- Layout을 변경시킬 경우, Reflow 발생을 줄이기 위해 낮은 계층의 요소에 효과를 주는 것이 좋음
애니메이션(Animation)
- 트랜지션은 시작하기 위해 이벤트가 필요하지만 애니메이션은 시작, 정지, 반복까지 제어 가능(물론, 이벤트 제어도 가능)
- 하나 또는 복수의 @keyframes으로 이루어짐
JS animation
-
JavaScript로 애니메이션을 만드는 것은 transition이나 animation을 코딩하는 것보다 복잡하지만 그 복잡성에는 큰 힘이 있다.
-
JavaScript animation은 코드의 일부로 인라인(in-line)으로 작성된다.
-
bouncing, stop, pause, rewind, or slow-down 같은 효과를 얻으려면 JS animation을 사용하는 것이 좋다.
JS animation framework
-
jQuery
-
Velocity
-
WebGL
-
GreenSock
-
그리고 여기서는 GreenSock을 추천한다.
JS animation VS Css animation
-
크로스 브라우징면에서는 JS 애니메이션을 사용하는 것이 낫다. 하지만, CSS 애니메이션은 모든 동작을 CSS에서 관리하고 필요하다면 JS는 이벤트 감지를 위해서만 사용한다.
-
실행 로직을 브라우저 자체에서 실행하기 때문에 메모리 소비를 최적화 해준다.
-
JavaScript에서는 css, 동작을 모두 관리해줘야하는 반면, CSS애니메이션은 CSS안에서 다 관리하기 때문에 관리에 용이하다.
reference
