CSS 전환
CSS 전환
CSS 전환은 특정 시간 동안 속성 값을 원활하게 변경할 수 있습니다.
이 요소에 마우스를 가져가 CSS 전환 효과를 확인하세요:
이 장에서는 다음과 같은 속성을 배울 것입니다:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
전환 효과 브라우저 지원
표에서 수치는 해당 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
| 속성 | 크롬 | IE | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
CSS 전환 사용법
전환 효과를 생성하려면 반드시 두 가지를 명확히 해야 합니다:
- 효과를 추가하려는 CSS 속성
- 효과 지속 시간
주의하세요:지속 시간 부분을 지정하지 않으면 전환 효과가 없습니다. 기본 값은 0입니다.
아래 예제는 100px * 100px의 빨간색 <div> 요소를 보여줍니다. <div> 요소는 width 속성에도 전환 효과를 지정했으며, 지속 시간은 2초입니다:
예제
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
지정된 CSS 속성(width) 값이 변경될 때, 전환 효과가 시작됩니다.
이제, <div> 요소에 마우스를 올려 담기했을 때 width 속성에 새로운 값을 지정해 보겠습니다:
예제
div:hover {
width: 300px;
}
주의하세요, 커서가 요소에서 벗어나면 점점 원래 스타일로 변환됩니다.
여러 속성 값을 변경합니다
아래 예제는 width와 height 속성에 모두 전환 효과를 추가한 것입니다. width는 2초, height는 4초입니다：
예제
div {
transition: width 2s, height 4s;
}
전환의 속도 곡선을 지정합니다
transition-timing-function 속성은 전환 효과의 속도 곡선을 정의합니다。
transition-timing-function 속성은 다음과 같은 값을 받을 수 있습니다：
ease- 시작이 느리게 시작하고, 빨리 진행하여 느리게 끝내는 전환 효과를 정의합니다(기본)linear- 시작에서 끝까지 일정한 속도를 유지하는 전환 효과를 정의합니다ease-in- 느리게 시작하는 전환 효과를 정의합니다ease-out- 느리게 끝나는 전환 효과를 정의합니다ease-in-out- 시작과 끝이 느리게 진행하는 전환 효과를 정의합니다cubic-bezier(n,n,n,n)- 세 번째 베塞尔 함수에서 자신의 값을 정의할 수 있습니다
다음 예제는 사용할 수 있는 다양한 속도 곡선을 보여줍니다：
예제
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
지연 전환 효과
transition-delay 속성은 전환 효과의 지연을 초로 지정합니다。
아래 예제는 시작 전에 1초의 지연이 있습니다：
예제
div {
transition-delay: 1s;
}
过渡 + 转换
아래 예제는 변환에 전환 효과를 추가한 것입니다：
예제
div {
transition: width 2s, height 2s, transform 2s;
}
更多过渡实例
CSS 전환 속성을 하나씩 지정할 수 있습니다. 다음과 같이 예제를 들어보겠습니다：
예제
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
또는 간추린 형식을 사용할 수 있습니다 transition 속성：
예제
div {
transition: width 2s linear 1s;
}
CSS 전환 속성
아래 표는 모든 CSS 전환 속성을 나열합니다：
| 속성 | 설명 |
|---|---|
| transition | 네 개의 전환 속성을 하나의 속성으로 설정하는 단축 속성입니다. |
| transition-delay | 전환 효과의 지연 시간(초로 계산됨). |
| transition-duration | 전환 효과가 얼마나 오래 지속되는지 또는 밀리초를 지정합니다. |
| transition-property | 전환 효과가 적용될 CSS 속성의 이름을 지정합니다. |
| transition-timing-function | 전환 효과의 속도 곡선을 지정합니다. |
