시작하기 앞서 어떻게 작동하는지 보기위해서, 아래에 있는 레드박스에 마우스를 올려보자. (스마트폰에선 터치)
1. 레드박스 예제
transition은 CSS의 적용을 한번에 적용하는게 아니라 시간을 두고 천천히 적용시키는 것이다. 이를 적절히 잘 이용하면 홈페이지를 더 고급(?)진 느낌으로 만들 수 있다. 고급예제는 뒤로 하고 먼저 기본적인 프로퍼티를 보면, 다음과 같다.
- transition-duration (몇 초동안 재생할지 결정)
- transition-delay (몇 초후에 시작할지 결정)
- transition-property (어떤 특성에 적용할지)
- transition-timing-function (변환의 속도의 함수를 지정)
- transition (위의 모든 정보를 한번에 입력)
뭔가 기억할게 많다고 하면, 일단은 transition-duration만 기억하자. transition-duration은 시간과 관련된 프로퍼티로, 5초를 설정하고 싶을 땐 다음과 같이 적어준다.
1 2 3 | div#target { transition-duration: 5s; } |
위의 레드박스 예제를 구현하기 위해서, 다른 부분도 전부 적어보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style> div#target { width: 100px; height: 100px; background-color: red; border: 1px solid black; transition-duration: 5s; } div#target:hover { width: 200px; background-color: blue; } </style> <div id=“target”></div> |
구현하면 다음과 같은 레드박스 예제가 완성된다.
2. 모든 프로퍼티에 적용 가능하진 않다.
많은 프로퍼티에 transition을 적용할 수는 있지만, 모든 프로퍼티에 사용할 수 있는건 아니다. 사용 가능한 프로퍼티는 아래와 같다.
- 위치속성 ( top / left / bottom / right )
- 크기속성 ( width / height )
- 박스 속성 ( margin / padding )
- 테두리 속성 ( border-width / border-radius / border-color )
- 색상 속성 ( color / background-color / box-shadow )
- 투명도 속성 ( opacity )
- 변환속성 ( transform )
먼저 사용가능하지 않는 프로퍼티 예제를 들어보면, HTML 요소를 사라지게 하거나 나타나게 하는 경우를 들수 있다. 이는 display 프로퍼티를 none에서 block으로 바꿔주면 HTML 요소를 사라지게 하거나 나타나게 할 수 있다. 하지만 아래 CSS 예제처럼 작성하여 실행해보면, transition-duration이 적용되지 않고, 즉시 사라지고 즉시 나타나게 된다. 만약 transition을 모든 프로퍼티에 적용가능하다고 기억하고 있으면, 나중에 왜 CSS가 적용안되는지 찾는데 시간은 허비하게 되는 경우가 발생한다.
1 2 3 4 5 6 7 8 9 10 11 12 | <style> div#target { width: 100px; height: 100px; background-color: rgb(200, 0, 0); transition-duration: 5s; } div#target:hover { background-color: rgb(0, 0, 200); display: none; } </style> <div id=“target”></div> |
마우스를 올려보자. (스마트폰에서는 터치를 해보자.)
사라져 있던 HTML요소를 나타나게 하는 기능은 사실 여러부분에서 사용되어진다. 대표적인 예제로, 홈페이지에서 메뉴를 클릭했을 때, 팝업 메뉴창이 뜨는 경우를 들 수 있다. 이 때, 팝업창을 즉시 나타나게 하지말고, 창이 커지면서 나타나게하면 더욱 고급진 느낌이 들 수 있다. 이것을 transition으로 구현할 수 있을지 않을까 생각할 수도 있지만, 앞서 말한것 처럼 display 프로퍼티에는 transition이 먹히지 않는다.
