[transition] CSS - transition (트랜지션) ★★★ - (천천히 변화) - IE 10

transition 정의

설정 시간 동안 부드럽게 변화.

 

---

IE 10 이상 주요 최신 브라우저 지원.

 

transition 사용 설정 조건 2가지

1. 

효과 줄 CSS 속성.

2. 

효과 지속 시간. (= 작업 수행 소요 시간)  ※  기본값: 0

★ 주의.

효과 지속 시간 미설정 시, transition 효과 안 생김. 

(∵ 기본값이 0이기 때문.)

 

transition 예제: width 속성에 2초 줌.

<style> 

div {

    width: 200px;

    height: 100px;

    line-height:100px;

    text-align:center;

    color:white;

    background: red;

    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */

    transition: width 2s;

}

div:hover {

    width: 300px;

}

</style>

<div>홈짱닷컴 Homzzang.com</div>

결과보기

transition 예제 - 홈짱닷컴에서 옛날 쓰던 것.

  -webkit-transition: all ease .3s;

    -o-transition: all ease .3s;

    -moz-transition: all ease .3s;

    -ms-transition: all ease .3s;

    transition: all ease .3s;

 

---

PS.

 

-webkit-transition: all .35s;

-moz-transition: all .35s;

transition: all .35s;