CSS transition 속성

1 개요

CSS transition

CSS 트랜지션

• CSS 점진적 변화 애니메이션
• IE 9 이하에서는 안됨

2 예시 1: 축약형

html

Copy

<style> 
.box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
}
.box:hover {
    width: 300px;
}
</style>
<div class='box'></div>

→ 빨간 박스에 마우스 커서를 올리면 너비가 늘어남

→ 예제: http://zetawiki.com/ex/css/transition.php

3 예시 2: 기본형

html

Copy

<style> 
.box {
    width: 100px;
    height: 100px;
    background: blue;
    transition-property: width;
    transition-duration: 2s; 
}
.box:hover {
    width: 300px;
}
</style>
<div class='box'></div>

→ 예제: http://zetawiki.com/ex/css/transition2.php

4 예시 3: 여러 속성 동시

CSS transition-property 문서를 참고하십시오.

html

Copy

<style> 
.box {
	text-align: center;
	width: 100px;
	height: 100px;
	background: blue;
	color: white;
	font-size: 12px;
	transition: all 3s; 
}
.box:hover {
	background: red;
	width: 300px;
	height: 300px;
	color: black;
	font-size: 36px;
}
</style>
<div class='box'>안녕 친구들</div>

→ 너비, 높이, 배경색, 글자색, 글자크기 모두 동시에 transition

→ 예제: http://zetawiki.com/ex/css/transition3.php

5 같이 보기

• CSS transition-property
• CSS 트랜지션 이동

6 참고 자료

• http://www.w3schools.com/css/css3_transitions.asp