221004.til

CSS 로 만드는 복잡한 애니메이션

기존의 애니메이션은 one-way, A 에서 B 로 바뀌는 애니메이션만 만들어봤다.
간단하게 처음상태에서 어떤 조건을 충족하면 최종상태가 되는데
트랜지션을 부여하면 자연스러운 애니메이션이 된다.
그러나 좀 더 복잡한 애니메이션, 예를들어 A에서 B가 됐다가 C가 되는 식의 애니메이션은
트랜지션 옵션 하나만으로는 구현할 수 없다.

transform

트랜스폼 참고 1
트랜스폼 참고 2

여러가지 transform 옵션이 있다.
scale 옵션으로 대상의 크기를 키운다거나,
transrateX, Y 로 대상의 위치를 조정하는 다양한 옵션을 줄 수 있다.
transform을 사용하는 가장 큰 이유는 성능에 있다.
예를들어, 어떤 물체를 좌우로 이동하는 작업은
margin-left, margin-right 같은 옵션으로도 할 수 있지만
transform: translateX 옵션이 웹 페이지 로딩이 훨씬 짧다.

브라우저는

1. width,height, margin, padding 같은 Layout
2. background-color 같은 paint
3. transform, opacity 같은 Composite

순으로 웹을 그려내는데

만약 margin 을 변경하는 애니메이션을 적용했다면
Layout 부터 순서대로 paint, composite 까지 재 랜더링 해야한다.
transform 을 적용했다면 3단계 composite 처리만 다시하면 되므로 훨씬 부담이 덜하다.
또한 브라우저는 단 하나의 작업공간만 쓸 수 있는데 이 공간에서 자바스크립트, CSS, HTML
의 처리를 한다.
그런데 transform 옵션은 또다른 작업공간에서 작업을 하여
처리할 양에 구애받지 않고 별개의 작업을 수행하므로 성능향상에 도움을 줄 수 있다.

애니메이션 성능을 향상시키는 방법

.box {
	will-change: transform;
}

바뀔 내용을 미리 렌더링 해주는 속성

.box {
	transform: translate3d(0, 0, 0);
}

GPU를 사용하게 하여 하드웨어 가속을 주는 속성

@keyframe

@keyframes 작명 {
	0% {
		'0%의 상태'
	}
	50% {
		'50% 진행된 상태'
	}
	100% {
		'100% 진행된 상태'
	}
}

animation-name: 작명;
animation-duration: 1s;

애니메이션의 상태를 @keyframes 옵션으로 설정할 수 있다.
몇 % 진행됐을 때 어떤 상태가 되어있을지 설정하면 부드럽게 작동한다.
그 후 애니메이션을 적용할 대상에 작명한 keyframes 를 animation-name 으로 지정해주면 된다.

정말 간단하게 만들어본 keyframes

코드 깃허브

개인적인 주석

정말 즐겁게 여러가지 만들어보면서 느낀건데,
오히려 상태의 분기점이 많으면 많을수록 애니메이션이 부드럽지 못하다.
처음에 생각한 개념은,
이쯤엔 이 상태, 이쯤엔 이 상태~ 이렇게 여러 포인트를 주는게 예쁠 것 같았는데
실제로는 이쯤부터 이쯤까지는 이렇게 변하고~ 그 다음엔 이렇게 변하고~ 하는
분기를 주는 것 보다는 과정을 명시해주는게 훨씬 보기좋았다.