CSS transition, 작동 원리 이해하기(왜 작동을 안할까?)

transition의 작동원리와 transition 대체할 수 있는 방법

transition은 애니메이션 효과를 주는 CSS입니다.

transition 하나만으로도 투박한 느낌을 지우고 부드러운 느낌을 줄 수 있는데요.

메뉴가 부드럽게 열리고 닫히거나 화면에 fade-in 효과 등을 줄 수 있습니다.

CSS의 대표적인 애니메이션 처리는 transition와 animation이 있는데요.

transition은 변경이 발생하는 순간 작동하고, animation은 transition보다 더 자유롭고 다양하게 사용이 가능한 친구입니다.

그럼 transition을 작성하는 코드부터 확인해 보겠습니다.

1. transition 사용하기

.setBox{
  background-color:pink;
  width:200px;
  height:200px;
  transition:all 1000ms linear 500ms;
}

위와 같은 방식으로 사용하며, 한 줄 표기의 의미는 다음과 같습니다.

transition: property duration timing delay;

property : color, background-color, border, position, all 등의 속성

duration : 완료까지 걸리는 시간. ms(밀리초) 또는 s(초)로 설정

timing : linear(동일), ease(느림->빠름->느림), ease-in(느림->빠름), ease-out(빠름->느림)

delay : 딜레이 시간(ms 또는 s로 설정)

물론 property나 delay 는 생략도 가능합니다.

이를 풀어 쓰면 다음과 같이 작성할 수 있습니다.

transition-property : property
transition-duration : duration
transition-timing-function : timing
transition-delay: delay

transition을 사용해 마우스를 올리면(hover) 박스가 부드럽게 커졌다가 줄어드는 코드를 확인해 보겠습니다.

.setBox{
  background-color:pink;
  width:100px;
  height:50px;
  transition:all 1000ms linear 500ms;
}

.setBox:hover{
  background-color:gold;
  width:200px;
  height:100px;
  transition:all 300ms ease;
}

<div class='setBox'></div>

박스가 커질 때는 .setBox:hover{}의 transition 설정에 따라 300ms, 줄어들 때는 .setBox{}의 transition 설정에 따라 1000ms동안 움직입니다.

그럼 이제는 요소 숨기기&표시하기 기능을 확인해 보겠습니다.

.setBox{
  background-color:gray;
  color:white;
  width:100px;
  height:50px;
  text-align:center;
  line-height:50px;
}
.showMenu{
  visibility:hidden;
  height:150px;
  width:100px;
  background-color:lightgray;
  opacity:0;
  color:black;
  border-radius:5px;
  transition:linear 500ms;
}
.setBox:hover .showMenu{
  visibility:visible;
  transition:linear 500ms;
  opacity:1;
}

<div class='setBox'>MENU
    <div class='showMenu'>
        <div class='menu'>
          메뉴 A
        </div>
        <div class='menu'>
          메뉴 B
        </div>
        <div class='menu'>
          메뉴 C
        </div>
    </div>
</div>

위 코드의 실행 결과는 아래와 같습니다.

위 코드에서 visibility가 아닌 display를 사용하면 결과는 어떨까요?

display를 사용하면 transition이 작동하지 않는 것을 볼 수 있습니다.

이유는 바로 display와 visiblility의 작동 방식에 차이가 있습니다.

transition은 위에서 이야기한 것처럼 변경이 발생하는 순간 작동합니다.

예를 들어 A 모양에서 B 모양으로 변경될 때 작동을 하는데요.

visibility는 공간은 그대로 두고 설정에 따라 요소를 숨기거나 나타내므로 A에서 B로 변경을 적용할 수 있습니다.

다음 그림과 같은 느낌입니다.

2. transition 작동하지 않는 이유

그렇다면 display가 작동하지 않는 이유도 추측할 수 있습니다.

display:none은 요소의 표시 뿐만 아니라 표소가 있는 공간도 비워버리는 설정입니다.

따라서 ‘A모양 -> B모양’으로의 변형이 아니라 ‘없음 -> B모양’ 이 되므로 transition이 작동하지 않는 것입니다.

그러므로 transition은 ‘모양의 변형‘만 기억하면 됩니다.

그렇다면 같은 효과를 내는 animation은 어떻게 사용할까요?

코드만 봐도 이해하기 쉬운 구조이므로 코드로 확인해 보겠습니다.

.setBox:hover .showMenu{
  visibility:visible;
  animation:setMotion 3s;
}
@keyframes setMotion{
  0%{
      opacity:0;
    }
  100%{
      opacity:1;
    }
}

---

CSS3는 아주 다재다능한 친구라 기존에는 jquery를 사용해 복잡하게 구현할 수 있던 애니메이션 효과들을 이제는 한 행의 코드만으로 해결할 수 있게 되면서 CSS3는 조금만 배워 둬도 아주 유용하게 사용할 수 있는 친구가 되었네요. CSS에 조금 더 관심을 갖고 포스팅을 늘려 가야겠습니다.