[transition] CSS - transition 속성 ★★★ - 지정시간 동안 천천히 변화 (= transition속성 = 트랜지션속성) (IE10+)

1. transition 예제 - 요소 허버 시, width 천천히 변경
2. transition 정의
3. transition 구문
4. transition 예제 - 요소 포커스 시, width 천천히 변경
5. transition 예제 - 홈짱닷컴에서 옛날 쓰던 것

transition 예제 - 요소 허버 시, width 천천히 변경

 

<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 정의

 

트랜지션(전환효과: 설정 시간동안 부드럽게 변화) 단축 속성.

 

---

 

1. 아래 4개 속성을 일괄 지정 가능.

• transition-property - 적용될 속성명 지정.
• transition-duration (필수) - 완료에 걸리는 시간 지정.
• transition-timing-function - 속도곡선 지정.
• transition-delay - 시작시기 지정.

 

2. 주의사항

transition-duration (지속시간) 지정 안 하면 트랜지션 효과 발생 X

(∵ transition-duration 속성의 기본값: 0)

 

3.

• 기본값: all 0s ease 0s
• 상속여부: X
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.transition="all 2s"

 

4.

IE10 이상 주요 최신 브라우저 모두 지원.

 

5. MDN 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

 

transition 구문

 

selector {transition: property duration timing-function delay|initial|inherit;}

 

---

[속성값]

 

transition-property

전환효과에 대한 CSS 속성명 지정.

 

transition-duration

전환효과 완료에 걸리는 시간(초 또는 밀리초) 지정.

 

transition-timing-function

전환효과의 속도곡선 지정.

 

transition-delay

전환효과 시작시기 지정.

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.

 

transition 예제 - 요소 포커스 시, width 천천히 변경

 

<style>

input[type="text"] {

  width: 150px;

  -webkit-transition: width .35s ease-in-out;

  transition: width .35s ease-in-out;

}

input[type="text"]:focus {

  width: 250px;

}

</style>

검색어: <input type="text" name="search">

 

결과보기

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;