CSS 전환
CSS 전환
CSS 전환을 사용하면 주어진 기간 동안 속성 값을 부드럽게 변경할 수 있습니다.
CSS 전환 효과를 보려면 아래 요소 위로 마우스를 가져갑니다.
이 장에서는 다음 속성에 대해 배웁니다.
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
전환을 위한 브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| 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> 요소는 너비 속성에 대한 전환 효과도 지정했으며 지속 시간은 2초입니다.
예시
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
지정된 CSS 속성(너비) 값이 변경되면 전환 효과가 시작됩니다.
이제 사용자가 <div> 요소 위로 마우스를 가져갈 때 너비 속성에 새 값을 지정해 보겠습니다.
예시
div:hover
{
width: 300px;
}
커서가 요소 밖으로 마우스를 가져가면 점차 원래 스타일로 다시 변경됩니다.
여러 속성 값 변경
다음 예제에서는 너비와 높이 속성 모두에 전환 효과를 추가합니다. 너비는 2초, 높이는 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)- 3차 베지어 함수에서 고유한 값을 정의할 수 있습니다.
다음 예는 사용할 수 있는 몇 가지 다른 속도 곡선을 보여줍니다.
예시
#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 전환 속성이 나열되어 있습니다.
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |