Javascript & JQuery & CSS

오늘은 transition 속성에 대해서 알아 보도록 하겠습니다.



메뉴로  사용할 이미지가 존재합니다. 위와 같이요....
마우스를 올린 경우 background-position 효과를 이용해서 특정위치의 이미지부분을 보여줍니다. 아래와 같이요....

background-position 속성에 대해서는  14. CSS 예제 - Backgound 표현 예제  에서 공부해 보시기 바랍니다.

그러나 마우스를 올렸을 경우 부드러운 효과를 주고 싶을 경우에는 transition 속성을 이해 하면 됩니다.

위와 같은 속성을 주면 됩니다. 이번 장에서는 이 transsition 속성의 옵션들에 대해서 정리해 보고자 합니다.
 
먼저 transition 효과는 익스플로러 9 버젼 이하에서는 작동하지 않습니다.

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

	transition은 위 4가지 속성의 축약 속성(shorthand property)이다. 영어로 shorthand property 라고 지칭하니, 
	
	함축속성, 또는 대표속성이라고도 표현할 수 있을 것이다. 쉽게 말하면, transition 하나로 위 4가지를 다 표현할 수 있다는 얘기다.

	
	transition-property:width;  
	transition-duration: 1s;  
	transition-timing-function: ease;  
	transition-delay: .5s;  

	transition: width 1s ease .5s;  
	

	즉 위 2가지의 사용법은 동일한 것입니다.

	 

	
	1. transition-property
	
		transition 구문의 첫번째 자리에 오는 transition-property 는 어떤 속성에 transition 효과를 줄지를 설정한다.
		transition-property의 값(value)

			- none : transition 효과를 지정하지 않는다.
			- all : 모든 속성이 transition 효과를 얻는다.
			- property : transition 효과를 얻게될 속성을 지정한다.

		모든(all) 속성을 지정하는 것과 일부 속성을 지정하는 것은 다음과 같은 차이가 있다.
		
		복수의 속성을 지정할 때는 콤마로 구분하여 각각의 값을 설정 할 수 있다.

		
		.transitionpost3 
		{  
			width: 100px;  
			height: 50px;  
			background-color:#8FBC8F;  
			border:1px solid black;  
			transition:width 1s ease, background-color 13s ease;  
		}  
   
		.transitionpost3:hover 
		{  
			width: 300px;  
			height: 100px;
			background-color:#000000;  
		}  
		

		위의 />

	
	1. transition-property
	
		transition 구문의 첫번째 자리에 오는 transition-property 는 어떤 속성에 transition 효과를 줄지를 설정한다.
		transition-property의 값(value)

			- none : transition 효과를 지정하지 않는다.
			- all : 모든 속성이 transition 효과를 얻는다.
			- property : transition 효과를 얻게될 속성을 지정한다.

		모든(all) 속성을 지정하는 것과 일부 속성을 지정하는 것은 다음과 같은 차이가 있다.
		
		복수의 속성을 지정할 때는 콤마로 구분하여 각각의 값을 설정 할 수 있다.

		
		.transitionpost3 
		{  
			width: 100px;  
			height: 50px;  
			background-color:#8FBC8F;  
			border:1px solid black;  
			transition:width 1s ease, background-color 13s ease;  
		}  
   
		.transitionpost3:hover 
		{  
			width: 300px;  
			height: 100px;
			background-color:#000000;  
		}  
		

		위의 style 예제는 
		
		transition:width 1s ease, background-color 5s ease;  

		너비 변화는 1초, 배경색상 변화는 5초에 걸쳐 일어난다.

		그러나 height 속성은 transition 속성을 주지 않았기 때문에 곧바로 적용이 된다.
		
	

 
2. transition-duration

 transition 구문의 두번째 자리에 오는 transition-duration은 변화가 몇초, 또는 몇 밀리세컨드(1/1000초)에 걸쳐 일어날지를 설정한다.
 6s, 0.5s, .3s, 120ms 이라고 적혀 있다면, 이는 각각 6초, 0.5초, 0.3초, 120밀리세컨드 라는 뜻이다.

3. transition-timing-fuction

 transition 구문의 세번째 자리에 오는 transition-timing-functing은 변화가 일어나는 속도를 설정한다.
 속도 커브의 함수를 설정한다는 것이 더 정확한 표현이겠지만, 어려운 말 보다는 실제 움직임을 보면서 이해하는 것이 편하다.

 transition-timing-function의 값(value)으로는

 - linear : transition-timing-function을 linear로 설정하면 변화가 시작부터 종료까지 동일한 속도로 일어난다.
 - ease  : ease는 극초반은 느리게, 초반은 빠르게, 종료지점은 느리게 변화가 진행된다.
 - ease-in : ease-in은 시작지점의 변화가 천천히 진행된다.
 - ease-out  : ease-out은 종료지점의 변화가 천천히 진행된다.
 - ease-in-out : ease-in-out은 시작지점과 종료지점의 변화가 천천히 진행된다.
 -기타속성 :  cubic-bezier, step-start, step-end, steps 등등이 있다.

 주로 쓰이는 것은 linear, ease, ease-in, ease-out, ease-in-out 이렇게 5가지이다. 이 5가지만 알고 있어도 transition을 활용하는데에는 큰 무리가 없다.


4. transition-delay

 transition 구문의 마지막 네번째 자리에 오는 transition-delay 는 transition 효과가 언제 시작할지를 설정한다. 말 그대로, 딜레이(delay)를 설정한다.

 
 transition:width 2s ease-in 1s; 

 위 예제는 마우스 커서를 올리면 1초가 지난 후 2초에 걸쳐 너비가 확장된다.
 

5. transition의 default 값

 transition의 default 값은

 all 0 ease 0

 transition 구문에서 생략된 값은 default 값으로 대체된다. transition 효과가 나타나기 위해서 반드시 주어져야 하는 값,
 
 즉 생략해선 안되는 값은 transition-duration 이다. 0초에 걸친 점진적인 변화라는 것은 있을 수 없기 때문이다.


 transition의 값으로 '2s'만 입력했다. 생략된 값은 default 값으로 대체되므로,
 
 
 transition:2s; 

 는

 transition:all 2s ease 0; 

 과 같다.