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에 조금 더 관심을 갖고 포스팅을 늘려 가야겠습니다.
