Transition
CSS3 전환(Transition)
CSS3에서는 transition 속성을 사용하여 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있습니다.
아래 펭귄 그림 위로 마우스를 올려놔 보세요!!
CSS3 전환(transition) 지원 버전
CSS3 전환(transition)을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.
| 속성 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
|
transition transition-delay transition-duration transition-property transition-timing-function |
10.0 |
26.0 4.0 -webkit- |
16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -webkit |
전환(transition)
전환(transition)을 위해 제공되는 속성(property)는 다음과 같습니다.
1. transition
2. transition-delay
3. transition-duration
4. transition-property
5. transition-timing-function
transition 속성
transition 속성은 다음과 같은 순서로 정의할 수 있습니다.
1. 해당 요소에 추가할 CSS 스타일 전환(transition) 효과를 설정합니다.
2. 추가할 전환 효과가 지속될 시간을 설정합니다.
다음 예제는 해당 요소에 마우스를 올려놓으면 해당 요소의 너비가 1초 동안 3배로 늘어나는 예제입니다.
예제
<style>
div.keyboard {
width: 100px;
-webkit-transition: width 1s;
transition: width 1s;
}
div.keyboard:hover { width: 300px; }
</style>
또한, 해당 요소의 여러 속성을 동시에 변경할 수도 있습니다.
다음 예제는 해당 요소에 마우스를 올려놓으면 해당 요소의 너비뿐만 아니라 높이까지도 변경하는 예제입니다.
예제
<style>
#resize {
height: 100px;
width: 150px;
-webkit-transition: width 1s, height 3s;
transition: width 1s, height 3s;
}
#resize:hover { width: 300px; height: 500px; }
</style>
transition-timing-function 속성
transition-timing-function 속성은 전환(transition) 효과의 시간당 속도를 설정합니다.
transition-timing-function 속성의 속성값으로는 다음과 같은 값을 설정할 수 있습니다.
1. linear : 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
2. ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
3. ease-in : 전환(transition) 효과가 천천히 시작됩니다.
4. ease-out : 전환(transition) 효과가 천천히 끝납니다.
5. ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝납니다.
6. cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
예제
<style>
div {
width: 100px;
-webkit-transition: width 1s;
transition: width 1s;
}
#div_01 {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
#div_05 {
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
div:hover { width: 300px; }
</style>
transition-delay 속성
transition-delay 속성은 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정합니다.
전환(transition) 효과는 이 메소드로 설정된 시간이 흐른 뒤에야 비로소 시작됩니다.
예제
<style>
#resize {
height: 100px;
width: 150px;
-webkit-transition: width 1s, height 2s;
transition: width 1s, height 2s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
#resize:hover { width: 300px; height: 300px; }
</style>
전환(transition) 효과와 변형(transform) 효과의 동시 적용
전환(transition) 효과와 변형(transform) 효과를 같이 적용할 수도 있습니다.
예제
<style>
#windmill {
height: 100px;
width: 100px;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
#windmill:hover {
width: 300px;
height: 300px;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
CSS3 transition 속성
| 속성 | 설명 |
|---|---|
| transition | 모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있음. |
| transition-property | 요소에 추가할 전환(transition) 효과를 설정함. |
| transition-duration | 전환(transition) 효과가 지속될 시간을 설정함. |
| transition-timing-function | 전환(transition) 효과의 시간당 속도를 설정함. |
| transition-delay | 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정함. |
