웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

Transition 본문

css3

Transition

jokack01 2013. 10. 8. 11:27

Transition

transition 이란 단어의 뜻은 “다른 상태로의 변화”를 뜻한다.

css3 에서 새로 생긴 transition 도 모양이나 색상의 변화를 시간을 두고 줄 수 있는 속성이다.

transition-property, transition-duration, transition-timing-function, transition-delay 총 네 가지 속성의 축약으로 transition 하나를 사용할 수 있다.

새로 생긴 transition 효과는 주로 마우스 오버했을 때 해당 요소를 어떻게 변화시킬지 같은 부분에 많이 사용한다.

 

 

  • transition-property : transition-property 는 transition 효과를 어떤 속성에 줄 것인지 직접 css 속성 중 이름을 지정해주는 속성이다. 만약 어떤 요소의 width 값을 변화주고 싶으면 transition-property:width 라고 적어주면 된다.
  • transition-duration : 변화되는 시간을 초단위로 지정해주는 속성
  • transition-timing-function : 요소가 변화되는 동안 각 구간별로 변화의 진행 속도를 빠르거나 느리게 개별적으로 지정할 수 있는 속성이다. cubic-bezier 값으로 직접 속도 변화를 지정할 수 있고 미리 정해진 값 5개(linear, ease, ease-in, ease-out, ease-in-out)를 사용해도 된다.
  • transition-delay : 변화가 언제 시작될지 지정해주는 속성



Transition 속기형 타입 

<본문>

-webkit-transition-property:-webkit-transform, color;

-moz-transition-property:-moz-transform, color;

transition-property:transform,color; 

-webkit-transition-duration:0.2s;

 -moz-transition-duration:0.2s;

 transition-duration:0.2s;

 -webkit-transition-timing-function:ease-out;

 -moz-transition-timing-function:ease-out;

 transition-timing-function:ease-out;

 

<약칭표기>

-webkit-transition: -webkit-transform 0.2s ease-out;

-moz-transition: -webkit-transform 0.2s ease-out;

transition: -webkit-transform 0.2s ease-out;

 

<값의 순서>

transition – property

transition – duration

transition – function

transition -  delay

  

<다중 전환> - 한 번 호출할때 여러 개의 transition 지정 (회전, 크기, 색 )

 transition – property: transform, color;

 transition – duration: 0.2s, 0.1s;

 transition – function: ease-out, linear;




ex1.) 마우스 오버에 따른 크기 변화

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Transitions</title>
<style type="text/css">
div{
width:100px;
height:100px;
margin:30px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
/* 전환해야할 속성, 몇초간 보여질것인지 설정 */
}
div:hover{width:300px;}
</style>
</head>
<body>
 
<h1>Transitions</h1>
<div> 마우스 오버 전 상태 </div>
<div> 마우스 오버시 </div>
 
</body>
</html>




ex2.) 마우스 오버에 따른 크기와 각도 변화

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Transitions</title>
<style type="text/css">
div
{
width:100px;
height:100px;
margin:50px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s;
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
</style>
</head>
<body>
 
 
<h1>Transitions</h1>
<div> 마우스 오버 전 상태 </div>
<div> 마우스 오버시 </div>
 
 
</body>
</html>


ps :  Transitions 을 호버 상태일때에 적용시키는 것이 아니라 호버될 대상에게 주어야 한다.


'css3' 카테고리의 다른 글

Multiple Columns  (0) 2013.10.08
Animation  (0) 2013.10.08
3D transform  (0) 2013.10.08
2D transform  (0) 2013.10.08
font-face  (0) 2013.10.08
'css3' Related Articles more