• Q&A
  • 회원가입
  • 로그인

[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;

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012