css3 transition

css transition 이란? 
마우스를 클릭하거나 포커싱, 활성화 상태에 변화를 주는것으로, css 값의 변화가 부드러운 애니메이션입니다.

일단 간단하게 속성을 살펴보겠습니다.
transition-property : 트랜지션할 속성.
transition-duration : 트랜지션 지속 시간.
transitin-timing-function: 지정한 시간동안이 트랜지션 속도 (타이밍 함수값) 

타이밍 함수값에는 기본값인 ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier 등이 있습니다. 
먼저 예를통해서 어떻게 변화되는지 보겠습니다.
마크업.
<a href="#" class="foo">CSS3 - Transition</a>

간단하게 위와 같이 있다고 하고 css 로 설정을 해보겠습니다.
기본적으로 a 이므로 밑줄을 없애고 배경과 여백만 주었습니다.
a { text-decoration:none; }
a.foo{
	padding:1em 2em;
	background: #00ff00;
}
a.foo:hover {
	background: #ffd700;
}
그럼 일단 아래처럼 보일것입니다.


여기에 트랜지션을 줘보겠습니다.
먼저 크롬으로 진행합니다. 크롬은 브라우져 접두어가 - webkit- 이라는거 아시죠?
참고로 트랜지션은 현재 브라우져마다 접두어가 다 붙습니다.
그럼 아래처럼 변경이 될것입니다.
a.foo{
	padding:1em 2em;
	background: #00ff00;
	-webkit-transition-property : backgrund;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
}
a.foo:hover {
	background: #ffd700;
}

백그라운드 속성에 트랜지션을 주었습니다.
그럼 평상시는 가만이 있다가 마우스를 갖다 대었을때(hover) 배경이 #ffd700 로 변화는 과정에서 애니메이션 효과가 일어납니다.
여러분이 크롬 브라우져가 있다면 아래의 파일로 테스트 해보세요.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS3 - Transition</title>
    <style>
	body {
		width:500px;
		margin:200px auto;
	}
	a { text-decoration:none; }
	a.foo{
		padding:1em 2em;
		background: #00ff00;
		-webkit-transition-property : backgrund;
		-webkit-transition-duration: 0.5s;
		-webkit-transition-timing-function: ease;
	}
	a.foo:hover {
		background: #ffd700;
	}
	</style>
</head>

<body>

	<a href="#" class="foo">CSS3 - Transition</a>

</body>
</html>



 

transition.html


트랜지션의 지연. - delay.


delay 속성값을 추가해서 좀더 시간을 지연해보겠습니다.
a.foo{
	padding:1em 2em;
	background: #00ff00;
	-webkit-transition-property : backgrund;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	-webkit-transition-delay: 0.5s;
}
a.foo:hover {
	background: #ffd700;
}

이제 마우스를 갖다 대었을때 0.5초가 더 지연이 되면서 효과가 나타납니다.
자 간단하죠. 트랜지션이라고 해봐야 복잡할거 없습니다.

축약형 표기법.


축약형 표기법은 property, duration, timing 을 한번에 지정하는 겁니다.
background 속성값 지정할때 처럼요. 위의 예제을 한번 축약형으로 볼까요.
a.foo{
	padding:1em 2em;
	background: #00ff00;
	-webkit-transition: background 0.5s ease;
}
a.foo:hover {
	background: #ffd700;
}
자 복잡한 속성 다 빼고 간단이 한줄로 했지요. 효과는 똑같습니다.

다중 속성.


다중속성은 여러개의 트랜지션효과를 주기위해 쉽표(,)로 구분해서 지정하며, 트랜지션마다 지속 시간과 타이밍 함수를 다르게 지정하는 것을 말합니다.

똑같이 위의 예제로 color 속성 하나만 추가해서 해보겠습니다.
a.foo{
	padding:1em 2em;
	background: #00ff00;
	-webkit-transition: background 0.5s ease, 
	color 0.3s linear;
}
a.foo:hover {
	background: #ffd700;
	color:#fff;
}

쉽표(,) 로 color 속성이 추가되었고, hover 에 색상값을 주었습니다.
그러면 배경이 0.5초이니까 배경이 변하기 전에 색상이 먼저 흰색으로 변하고 배경이 변합니다. 크롬으로 한번 보세요.
 

transition.html


그럼 배경에만 트랜지션을 줄수 있느냐???

속성 - Property.


위의 예제에는 배경 즉 background 에는 효과를 주었습니다. 그럼 어디에 줄 수 있느냐.
Property : background, color, height, width, outline 
이렇게 다섯가지 입니다.
이걸 묻지도 말고 따지지도 말고 한번에 주는 속성값이 all 입니다.
위의 예제로 한번 볼까요?
위의 예제는 background 와 color 두가지의 속성이 있지요.
a.foo{
	padding:1em 2em;
	background: #00ff00;
	-webkit-transition: all 0.5s ease;
}
a.foo:hover {
	background: #ffd700;
	color:#fff;
}

어때요 더 간단하지요. 마찬가지로 height, width, outline 속성이 hover 에 있으면 다 같이 적용이 됩니다.  
그럼 a 에만 효과를 줘야하느냐?
그건 아닙니다. 아주 많은 곳에 줄수 있습니다.
http://www.w3.org/TR/css3-transitions/#properties-from-css- 에서 확인 할 수 있습니다.

브라우져 지원과 사용 팁.


트랜지션은 크롬,파이어폭스, 오페라, 사파리,익스플로러 10버젼 등의 최신버젼에서 지원합니다. 
현시점의 위 브라우져 버젼은 전부 지원합니다. 단, 브라우져 접두어를 사용해야 합니다.
브라우져에 맞게 사용하려면 아래처럼 사용해야 합니다.
a.foo{
	padding:1em 2em;
	background: #00ff00;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
a.foo:hover {
	background: #ffd700;
	color:#fff;
}

버젼을 따지기도 힘들고, 각각의 속성에 따라 주기도 힘드니 그냥 CSS3 Generator 을 이용하는것이 좋습니다.


아시겠지만 Generator 등을 이용하는것도 기본 속성을 어느정도 이해하고 있어야 이용이 가능합니다. 아무것도 모르면 이용하기가 어려워요.
위 글만 잘 읽으셨어도 트랜지션을 이용하는데 많은 도움이 됐을거라 생각됩니다.
거기에 Generator 을 이용하면 어려움이 없습니다.

제글에 보면 css3 속성에대한 글이 있습니다. 참고하시기 바랍니다.
-webkit-gradient => http://demun.tistory.com/1986
-o-linear-gradient , -o-radial-gradient => http://demun.tistory.com/1987
그라데이션 gradient => http://demun.tistory.com/1990
text-shadow =>  http://demun.tistory.com/1983 
 




개    개