CSS transition 속성

(CSS transition에서 넘어옴)

1 개요[ | ]

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

2 예시 1: 축약형[ | ]

<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: 기본형[ | ]

<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: 여러 속성 동시[ | ]

<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 같이 보기[ | ]

6 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}