[CSS3] Transition

Transition (CSS 속성에 에니메이션 효과를 주다)
Transition 의 사전적인 뜻은 '(다른 상태・조건으로의) 이행(移行)[과도(過渡)] ' 이다
즉 뭔가의 상태가 어떤 조건에 의해 다른 상태로 변화되어 간다는 의미이다

CSS3 새로운 특성인 Transition 역시 이와 유사한 맥락으로 해석된다
개체에 적용된 스타일을 대상으로 주어진 시간과 조건으로 부드럽게 상태를 변화시키는 기술이다

예를 들어 색상이나 위치와 같은 CSS 속성을 다른 색상, 다른 위치로 변경 시킬 수 있어 일종의 에니메이션 효과를 줄 수 있다는 것이다

Transition 조건을 위한 속성
Transition 을 위한 다음 4가지의 조건 설정이 가능하다

1) transition-property
색상이나 위치 등 변화의 대상이 되는 CSS 속성을 지정한다. ex) background-color
transition-property 로 지정된 CSS 속성은 이후 변화가 있을 때마다 transition 조건에 영향을 받는다

2) transition-duration
A스타일 -> B스타일로의 변화에 걸리는 시간을 초단위로 지정한다. ex) 4s
이 시간 설정으로 인해 스타일의 변화가 서서히 전개 되는 것이다

3) transition-delay
변화가 시작되기 전 시간을 초 단위로 지정한다. ex) 1s
스타일의 변화를 주기전에 일정 시간 대기(지체)해야 할 경우 사용한다

4) transition-timing-function
Transition 을 통한 효과를 줄 때 변화되어 가는 흐름, 시간에 따른 변화 속도와 같은 일종의 변화되어 가는 정도를 지정하게 된다. 보통 플래시나 익스프레션 블랜드와 같은 디자인 툴에서 에니메이션 효과를 줄 때 자주 사용된다. 큐빅 베지어(cubic-bezier) 값을 이용하여 제어하게 되는데 미리 정해둔 5개의 키워드가 제공된다. 다음의 제공되는 키워드와 그의 값이다
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) , 기본값
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

만일 이 5개의 키워드 외에 직접 값을 제어하고 싶을 경우 다음과 같이 직접 지정 하면 된다
cubic-bezier(0.2, 0.4, 0.7, 0.8)

큐빅 베지어 값을 이해하기 위해 다음 그래프를 참고 하자
다섯 가지 값의 변화를 직접 눈으로 볼 수 있는 데모가 제공되며 이 중 그래프만 발췌했다
http://www.the-art-of-web.com/css/timing-function/


Timing Function Control Points(W3C 발췌)


Transition 사용법 및 (브라우저별) 접두어
Transition 효과를 주기 위해서 앞서 설명한 4가지 속성을 따로 지정하거나 한 줄에 모두 지정할 수 있다 즉 다음의 두 설정은 동일한 것으로, 개체의 투명도(opacity) 속성을 2초에 걸쳐 변하도록 한다
그리고 변화를 시작하기 전 1초를 대기시키는 예이다

한줄 설정>
 transition: opacity 2s 1s ease

각 속성을 따로 정의> 
 transition-property: opacity;        
 transition-duration: 2s;      
 transition-delay: 1s;    
 transition-timing-function: ease;

그리고 몇몇 CSS3 새 특성들과 같이 Transition 역시 그 스펙이 완성된 것이 아니라서 브라우저별 임시 특성을 이용해야 한다. 즉 아래와 같이 브라우저에 따른 접두어를 붙여야 한다
- 웹 킷 기반 브라우저(크롬, 사파리): -webkit-transition
- 파이어폭스: -moz-transition
- 오페라: -o-transition

Transition 의 간단한 예
Transition 을 이용해 CSS 스타일이 부드럽게 변화하는 간단한 데모를 만들어 보자
앞서 설명한 내용인데, 이미지의 투명도를 변화시키는 예이다

기본적으로 이미지가 최초 로딩될 때는 완전 불투명 상태이다(기본 상태 Opacity=1)
Transition 을 이용해 1초 후 투명도를 변화시키는데 총 2초에 걸쳐 투명도가 0.2이 되도록 한다

이후 이미지의 투명도 변화는 Transition 조건에 영향을 받게 되는데,
마우스가 이미지 위에 올라오는 hover 상태에서 투명도를 1로 다시 변화시킨다
이 변화 역시 Transition 조건에 의해 hover된 뒤 1초 후 변화가 시작되어 총 2초에 걸쳐 완정불투명상태로 서서히 변화한다

<img id="hello" src="son.bmp">

<style>
img {      
opacity: 0.2;    
-webkit-transition-property: opacity;       
-webkit-transition-duration: 2s;     
-webkit-transition-delay: 1s;   
-webkit-transition-timing-function: ease;
}  

img:hover {      
opacity: 1;  
}
</style>

브라우저에서 데모를 실행을 해 보면,
이미지가 로딩 되고 1초 후 부터 서서히 투명해 지기 시작한다.
총 2초에 걸쳐 투명도가 0.2가 될 때까지 진행된다. 그리고 이후 이미지에 마우스를 올리면 또 다시 서서히 이미지가 밝아 진다(완전 불투명이 될 때까지)

è

 
변경 대상이 되는 CSS 속성을 하나 이상 지정할 수도 있는데,
앞의 데모의 투명도와 더불어 크기도 Transition 대상 속성이 되도록 해 보자

아래와 같이 코드를 수정하였다. 한줄로 단축해서 표현했으며 Opcity, width 속성이 Transition 대상이 되도록 하였다. 그리고 width 변화는 1초동안, opacity 변화는 3초 동안 진행되도록 하였다. 이렇게 하면 최초 로딩시 그리고 마우수 horver 시 서서히 이미지가 커지면서 밝아지는 효과를 줄 수 있다.

<style>
img {      
opacity: 0.2;    
width: 150px;
-webkit-transition: width 1s ease-out, opacity 3s ease;
}  

img:hover {      
opacity: 1;  
width: 300px;
}
</style>

è

이렇게 두 개 이상의 CSS속성을 Transiction 대상으로 지정할 수 있는데,
예에서 처럼 각각의 CSS속성에 다른 조건을 주거나 다음처럼 한꺼번에 같은 조건을 줄 수도 있다
-webkit-transition: all 3s ease;


Transition정리
Transition을 이용해 에니메이션 같은 스타일 효과 주기 위해 다음의 것들을 이해하면 된다

1) 변경될 스타일의 대상
어떤 속성에 변화를 줄지를 결정하는 것이다. CSS 속성 중 어떤 속성이 변화의 대상이 되는가 하는 것이다. 앞서 예에서는 이미지의 너비(width)와 투명도(opacity) 이 그 대상이 되었다
즉 하나 이상의 CSS 속성을 Transiction 대상으로 지정할 수 있다

2) 스타일의 처음 상태와 변경된 상태
Transition은 CSS 속성을 변화시켜 스타일 효과를 주는 것이다
따라서 속성이 변화되기 전 처음 상태 값과 변경된 후 상태 값에 대한 이해가 있어야 한다
앞서 예에서는 img 전체에 Transition효과를 주었다. 이럴 경우 처음 상태는 이미지가 처음 로딩될 때 브라우저가 적용하는 기본 값이 처음값이다.

즉 앞 예에서의 최초 상태는 투명도 1, 크기 0 이며 이미지가 로딩 된 후 투명도 0.2, 크기 150px가 되었다. 그리고 hover 될 때 처음 상태는 바로 직전 상태에서 hover 스타일 값으로 서서히 변경되는 것이다

3) 기타 조건
Transition 설정을 통해 시작 전 대기 시간(초), 총 걸리는 시간(초) 등 세부 조건을 지정하면 된다

CSS의 에니메이션 효과과 관련된 예는 직접 실행 해 보는 것이 좋다
앞 데모도 직접 브라우저에서 그 동작을 확인해 보기 바란다


클릭에 반응하여 움직이는 이미지 만들기
마지막으로 Transition을 이용해 움직이는 이미지 효과를 만들어 보고 글을 마치도록 하겠다
CSS의 속성 중 margin-left 속성의 변화를 통해 이미지의 위치를 조정하는 예이다

Transition 에서는 margin-left 의 변화에 반응하도록 지정하며
개체의 className 속성을 이용해 스타일의 상태 변화를 유도하게 된다
이 데모는 구글의 html5rocks 을 참고한 것이다

<img id="myImage" src="son.bmp">
.....
<style>
img {      
-webkit-transition: margin-left 1s ease-in-out;
}  
img.left {
 margin-left: 0;
}
img.right {
 margin-left: 780px;
}
</style>
<script>
var content = document.querySelector('#myImage');
content.addEventListener('click', function() { 
  if (this.className == "right") {
    this.className = "left";
  }
  else {
    this.className = 'right';
  }
}, false);
</script>

데모를 실행 하고 이미지를 클릭하면 좌/우로 이미지가 이동하는 것을 확인할 수 있다

참고>
http://www.w3.org/TR/css3-transitions/
http://css3.bradshawenterprises.com/#how2transitions
http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/