CSS3 Transition 트랜지션 변형의 시작

css3 트랜지션속성이 있기전에는 웹페이지 안에서의 동적인 부분은 adobe flash가 담당하고 있었습니다. 하지만 구글크롬이나 애플사에서 플래쉬를 지향하기 시작했습니다. 이유인 즉슨 보안관련문제도 있으면서 웹표준에 어긋나고 모바일에 최적화 되지 못하기 때문입니다. 사실 플래쉬는 동적인 요소에 불과했지 각종 메뉴나 사이트에 사용하는건 적합하지 못했던건 사실입니다.

그래서 동적인 요소를 단지 이 트랜지션이나 애니메이션 CSS만으로 커버가 됐다는 사실입니다. 시대의 흐름인 만큼 더욱 간소화되고 더욱 쉽고 정교해졌습니다.

우선은 트랜지션에관해 먼저 포스팅해보겠습니다.

트랜지션은 지정한 속성에서 또다른 지정값(시간) 동안 부드럽게 변경이 가능합니다. 왜 예를 들어 버튼값이 기본 블랙이고 마우스 오버했을시에 그레이로 바뀌는데 이것이 단순히 a:hover {background-color} 를 변경하는것이 아니라 블랙에서 그레이로 천천히 자연스럽게 색이 변경되는것이 트랜지션입니다.

예제입니다.

Transition

.tra {transition: background 1s; background:black; padding:10px; color:#fff}
.tra:hover {background:gray}

<div class="tra">Transition</div>

위의 소스에서 transition: 백그라운드 1초 라고 되어있습니다. 다른 액션이 취해지면 1초동안 다른 액션에 맞춰 변경하여라 그런 뜻입니다.

더 작은 0.1부터 무제한 초로 사용할 수 있습니다.

transition 뒤에 사용하는 css는 정해진건 없습니다. 사용하기 나름입니다. 예를들어 width, height, top, left, right, bottom, margin, padding, color, 거의 모든 css를 적용할 수 있습니다.

하나만 되는것도 아닙니다. 여러가지 속성을 동시에도 할 수 있습니다.

예제입니다.

Transition

.tra1 {transition: background 1s, height 1s; background:black; padding:10px; color:#fff; height:30px}
.tra1:hover {background:gray; height:100px}

<div class="tra">Transition</div>

아주 자연스럽게 변화하는것이 보입니다.

Transition의 추가 속성

transition-delay - 이 속성은 변형을 하기전 딜레이(지연)을 초단위로 지정해줍니다.

Transition

transition-delay: 2s;를 적용하였습니다. 2초뒤에 컬러가 그레이로 바뀌는것을 확인 할 수있습니다. 물론 돌아오는 타이밍도 똑같이 2초뒤에 적용됩니다. 여기서 팁은 오버했을때는 딜레이를 2초를 적용하고 싶고 다시 마우스 아웃이 됐을때는 바로적용되게 하려면 다음과같습니다.

Transition

.tra_delay1 {transition: background 1s; background:black; padding:10px; color:#fff; transition-delay: 0s;}
.tra_delay1:hover {background:gray; transition-delay: 2s;}

원 소스에 원하는 시간을 주고 오버했을때를 더 길게 시간을 주면 위와같이 변형이 됩니다.

두가지 차이 잘 보시고 직접 테스트 해보시길 바랍니다.

transition-timing-funtion - 변형의 속도의 곡선을 지정해줍니다.

그 곡선지정에는 다음과 같이 여러 형태가 있습니다.

ease - 천천히 시작후 변환효과를 지정하고 빠르다가 느리게 끝납니다. 기본으로 설정됩니다.

ease-in - 느린시작으로 변환효과를 나타냅니다.

ease-out - 느린끝으로 변환효과를 나타냅니다.

ease-in-out 느린시작과 끝으로 변환효과를 나타냅니다.

linear -시작부터 끝까지 동일한 속도로 변환효과를 나타냅니다.

ease

ease-in

ease-out

ease-in-out

linear

이와같은 트랜지션으로 웹페이지에서 더욱 동적으로 활용할 수 있습니다. 이와비슷한 애니메이션 속성도 있지만 실질적으론 트랜지션 속성이 더 많이 쓰이고 있습니다. 딱딱했던 나의 사이트에 조금더 부드러운 속성의 트랜지션 사용은 나의 품격을 더욱 높여주는 계기가 될 것입니다.