cubic-bezier

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

 

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

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

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

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

 

 

 

 

애니메이션과 관련된 속성

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

 

간단하게 하고 싶은 분들이라면 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); }
}

 

이미지처럼 구간별로 다르게 표현하고 싶으신 거라면, 위 코드처럼 작성하시면 됩니다.

0% ~ 23%의 구간의 애니메이션 속도를 지정하려면 0% {     }에 작성해주세요.