CSS transition-property

CSS transition-property Property

CSS transition-property 속성

1 값 목록

• transition-property를 지정하면 지정한 것들만 transition(점진적 변화)됨

예: background, width, height, outline, color, font-size 등

• all로 하면 모든 속성에 transition 효과가 적용됨
• none으로 하면 모든 속성에 transition 효과가 비활성화됨

값	설명
none	모든 속성에 transition 비활성화
all	모든 속성에 transition 적용 ★
property	지정한 속성들에 transition 적용 ★

2 transition 가능 property 목록

분류	property
위치	top, bottom, left, right
크기	width, height
공간	margin, padding, background, background-color, opacity
테두리	border, border-width, border-radius, border-color
글자	font-size, color

3 예시: all

<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

4 같이 보기

• CSS transition

5 참고

• http://www.w3schools.com/cssref/css3_pr_transition-property.asp