CSS의 트랜지션(Transition) 속성에 대해 알아보자

일단... 자바스크립트에 이런거 올려도 되냐고요? 내가 올려도 된다고 정의했으니까 넘어가자.

---

Transition이란? 

CSS로 어떤 애니메이션... 그러니까 어떤 메뉴에 마우스를 올렸을때 색깔이 바뀐다거나, 난데없이 밑줄이 생긴다던가 하는 거 말이다. 그런걸 할 때 주는 속성인데, 사실 트랜지션을 안 준다고 애니메이션이 제대로 작동을 안 하는 건 아니다. 알리오올리오에 베이컨이 안 들어가도 알리오올리오는 알리오올리오인 것처럼 말이다. (마늘 빠지면 크리티컬 히트)

 

대신 트랜지션을 주면 애니메이션 속도를 조절할 수 있기 때문에 좀 더 스무스해보인다. 알리오올리오에 베이컨이 딱히 들어가지 않아도 상관 없지만 들어가면 맛있는것처럼.

 

트랜지션의 속성에는 Delay, Duration, Property, timing-function, behavior 다섯가지가 있고(transition-delay 이런 식으로 쓴다) 보통은 duration을 많이 준다. 그렇다고 다른 속성을 안 쓴다는 건 아니니 오해하지 말자. 

 

Transition duration

See the Pen CSS transition 1 by koreanraichu (@koreanraichu) on CodePen.

두 사각형 다 마우스를 올리면 배경색이 변하게끔 하고, 하나에만 트랜지션을 1초 줬다. 이제 위쪽 사각형과 아래쪽 사각형을 비교해보자. 마우스를 올렸을 때 위쪽 사각형은 바로 색깔이 바뀌지만 아래쪽 사각형은 색깔이 조금 천천히 바뀌는 것을 알 수 있다. 어떤 차이가 있는지 보라고 일부러 1초로 해 둔건데, 보통은 0.1초 0.5초 이런 식으로 하기 때문에 저렇게 늦게 반응하지 않는다. 

 

위쪽 사각형과 달리 아래쪽 사각형이 좀 변하는 시간은 늦지만 자연스럽게 변화한 것을 볼 수 있는데, 이렇게 애니메이션에 트랜지션이라는 조미료를 첨가하면 훨씬 자연스럽게 애니메이션을 재생할 수 있다.

 

Transition delay

See the Pen CSS transition 2 by koreanraichu (@koreanraichu) on CodePen.

이번에는 delay가 뭔지 같이 찍먹해보자. 둘 중 아래쪽에는 delay를 1초 줬으니 한번 비교해보면 된다. 마우스를 올렸을 때 위쪽은 바로 별이 사라지지만, 아래쪽은 마우스 커서를 올리고 잠시 후에 별이 사라진 것을 볼 수 있다.

 

트랜지션 딜레이는 딜레이 속성에 준 시간만큼 이따가 재생하라는 얘기로, 아래쪽 별은 딜레이를 1초 줬기 때문에 별이 사라지는 애니메이션이 1초 후에 재생된 것이다.

 

Transition property

이건 좀 복잡할수도 있는데, 잘 따라옵시다.

 

See the Pen CSS transition 3 by koreanraichu (@koreanraichu) on CodePen.

엥? 그냥 트랜지션 지속시간이 다른건가요? 아니다. 이건 코드를 잘 봐야 한다. 

 

위에 delay나 duration은 아무개:hover에 opacity건 배경색이건 바꿀 게 들어가고 transition-delay나 transition-duration이 같이 들어가 있다. 그리고 얘를 봤더니 div에 transition-property가 있네? 아니 이게 뭐시여?

 

그건 transition-property를 통해 애니메이션을 줄 속성을 미리 정했기 때문이다. property는 애니메이션을 적용할 속성을 명시하는건데, 위 코드는 '애니메이션으로 투명도 속성에 변화를 줄 것'이라고 미리 정해뒀기 때문이다. 그리고 지속시간도 위에 같이 준 것. 보통 프로퍼티는 별도로 속성 지정을 하지 않으면 기본값이 all이다. 굳이 손 댈 필요가 있을지는 모르겠음...

 

Transition timing function

See the Pen CSS transition 4 by koreanraichu (@koreanraichu) on CodePen.

문서가 영문이긴 한데... step은 그냥 탁 탁 탁 끊어서 가는건가보다. 따로 steps로 주는 방법도 있다. 

 

영상 편집 해 본 사람들은 아실텐데, 그 영상 전환 효과중에 페이드인, 페이드아웃이라고 있다. 파워포인트 애니메이션에도 있을건데, 처음에는 천천히 들어왔다가 훅 들어가는... 그런 식으로 애니메이션 재생 속도를 중간에 바꾸는? 그런거다. linear는 선형인데, 얘는 속도가 일정하다.

 

See the Pen CSS transition(step) by koreanraichu (@koreanraichu) on CodePen.

steps로 스텝 수를 4로 지정한 결과. 근데 얘는 솔직히 탁 탁 탁 탁 가는거 말고 뭔 차이가 있는지 모르겠다…