animation-direction 차이

1. 애니메이션 방향이 달라도 진행은 같게

(1). 애니메이션 방향이 다르면 결과가 다르다?

• keyframe을 이용해 좌 → 우로 이동하는 애니메이션을 만들었다.

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(500px, 0, 0);
  }
}

• 그리고, 첫번째 사각형에는 애니메이션 방향을 기본으로, 두 번째에는 reverse로 지정했다.
  

  

그렇다면, reverse를 한 사각형과 그렇지 않은 사각형의 애니메이션은 같을까? 답은 아니다!

• 아래 예시는 다른 방향을 적용한 모습이다. (*css-trick 예시*)
• 실행버튼을 클릭하면 애니메이션 방향만 다른데, 진행 흐름이 다른 걸 알 수 있다.

See the Pen reverse, default animation difference by KumJungMin (@kumjungmin) on CodePen.

(2). 진행 방향이 달라도 애니메이션 흐름은 같게...

이처럼 두 애니메이션 진행이 다른 이유는 cubic-bezier 때문이다.
그럼, 애니메이션 방향이 달라도 흐름을 같게 할 수 있을까? 있다!

• 아래 보기의 cubic-bezier를 적용하면 된다.
• default인 경우에는 cubic-bezier(0.45, 0.25, 0.60, 0.95)를 지정하고,
• reverse일 때는 cubic-bezier(0.40, 0.05, 0.55, 0.75) 적용하자!

See the Pen Reverse cubic-bezier by KumJungMin (@kumjungmin) on CodePen.

• 적용하면 default와 reverse 모두 같은 진행흐름을 보이는 걸 알 수 있다. 🙂

See the Pen reverse, default animation difference2 by KumJungMin (@kumjungmin) on CodePen.

출처
아래 링크를 찾아가면 더 자세히 알 수 있다구~

• css tricks의 포스팅, Reversing an Easing Curve