CSS transition 속성

1 개요

CSS Transition

CSS 트랜지션

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

2 예시 1: 축약형

html

Copy

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

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

→ 예제: http://jmnote.com/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://jmnote.com/css/transition2.php

4 참고 자료

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