brunch

매거진 CSS 애니메이션

라이킷 32 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 구구 Jan 08. 2017

CSS Animation 퀄리티를 높여보자

쉽고 간단하게 퀄리티를 높여봐요.

CSS 애니메이션 작업을 할 때 어떻게 해야 퀄리티 높은 애니메이션을 만들 수 있을까요?

여러 가지 방법들이 있겠지만 가장 따라 하기 쉬운 방법에 대해 이야기를 해볼게요.

이야기하기 앞서 혹시 CSS에서 transition을 써보신 적 있으신가요?

애니메이션을 부드럽게 하기 위해 ease, ease-in, ease-out, ease-in-out를 함께 쓰셨나요?

써보신 분들이라면 글의 내용을 이해하기 쉬울 거예요. 안 써보셨어도 상관없습니다 :)

애니메이션과 관련된 속성

CSS 애니메이션과 관련된 속성들은 어떤 것들이 있을까요? 크게 두 가지로 나누자면 애니메이션 관련 속성들과 Transform 속성들이 있습니다. 이번 글에서는 애니메이션 관련 속성들에 대해 써보려고 합니다. 애니메이션 속성 animation-name animation-duration animation-timing-function animation

brunch.co.kr/@99-life/3

이전 글에서 나왔던 animation-timing-function에 대해 기억나세요?

간단하게 하고 싶은 분들이라면 ease, ease-in, ease-out, ease-in-out을 사용해서

애니메이션을 부드럽게 만드시면 됩니다. 하지만 욕심이 더 생기는 분들이 계실 거예요.

그렇다면 Cubic-bezier를 쓰시면 됩니다. 정해진 이징(easing) 값이 아닌

사용자가 직접 커브를 조절해서 디테일한 애니메이션을 만들 수 있어요.

같은 형태, 크기, 색상, 값을 준다고 해도 커브 하나 때문에 애니메이션이 달라지죠.

GIF에서 보이는 두 애니메이션의 차이점이 확실히 느껴지시나요?

아래 애니메이션에만 Animation-timing-function에 Cubic-bezier를 추가했어요.

@keyframes move {
      from { transform: translateX(0); }
      to { transform: translateX(400px); }
}

@keyframes move2 {
      from {
            transform: translateX(0);
            animation-timing-function: cubic-bezier(1, 0, 0.8, 1);
      }
      to { transform: translateX(400px); }
}

코드 한 줄 차이인데 애니메이션은 엄청 달라졌죠?

Cubic-bezier는 어떻게 해야 맛깔나게 잘 쓸 수 있을까요?

CSS Cubic-bezier 곡선은 시간의 흐름에 따른 애니메이션 퍼센트입니다.

애니메이션 퍼센트 == 진행률이라고 보셔도 무방하겠네요.

X축 방향으로 400px 이동하는 애니메이션을 예시로 들면,

진행률 0%면 시작점이고 진행률 100%면 400px 이동한 위치겠죠.

Cubic-bezier(1, 0, 0.8, 1)은 예시 코드에서 썼던 값입니다.

GIF를 보시면 아시겠지만 처음엔 천천히 움직이다가 속도가 갑자기 빨라졌죠?

그 애니메이션을 생각하시면서 곡선의 형태를 보세요.

어렵게만 생각했던 Cubic-bezier 곡선이 꽤 직관적으로 보이지 않나요?

ease, linear, ease-in, ease-out, ease-in-out은 위 이미지와 같은 형태의 곡선을 가지고 있습니다.

http://easings.net/ko#

Cubic-bezier를 원리는 알겠는데 어떻게 그래프를 그려야 할지 감이 안 잡히신다면,

http://easings.net/ko에서 다양한 곡선들을 확인해보세요.

마우스를 호버 하시면 어떤 움직임을 가지고 있는지 보실 수 있습니다.

다만, easeInElastic이나 easeinBounce와 같은 움직임을 구현하려면 Cubic-bezier를

하나만 쓰는 것이 아니라 구간 별로 쪼개서 따로따로 적용해야 할 거예요.

그렇다면 어떻게 구간 별로 Cubic-bezier를 적용하나요?

@keyframes scale {
      0% { transform: scale(0); }
      23% { transform: scale(1); }
      50% { transform: scale(0.5); }
      76% { transform: scale(2); }
      100% { transform: scale(0); }
}

0% ~ 23%, 23% ~ 50%, 50% ~ 76%, 76% ~ 100%

구간마다 다른 속도로 애니메이션을 표현하고 싶으면 어떻게 해야 할까요?

출처 : https://medium.com/@ryan_brownhill/after-effects-to-css-79225c1d767e#.y61w4xxcm

@keyframes scale {
      0% {
            transform: scale(0);
            animation-timing-function: ease-out;
      }
      23% {
            transform: scale(1);
            animation-timing-function: ease-in;
      }
      50% {
            transform: scale(0.5);
            animation-timing-function: cubic-bezier(1, 0, 0.6,1.5);
      }
      76% {
            transform: scale(2);
            animation-timing-function: cubic-bezier(0, 0.5, 0, 1);
      }
      100% { transform: scale(0); }
}