CSS3 전환
CSS3 전환은 주어진 기간 동안 (하나의 값에서 다른) 원활 속성 값을 변경할 수 있습니다.
예 : 마우스 요소를 통해 아래의 CSS3 전환 효과를 볼 수 있습니다 :
전환에 대한 브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 다음 -webkit-, -moz- , 또는 -o- 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
어떻게 CSS3 전환을 사용하는 방법?
전환 효과를 만들려면 두 가지를 지정해야합니다 :
- CSS의 속성은 당신에 효과를 추가 할
- 효과의 지속
주 : 시간 부분이 지정되지 않은 경우 기본 값은 0이기 때문에, 전이는 영향을 미치지 않는다.
다음의 예는 보여줍니다 100px * 100px 빨간색 <div> 요소를. <div> 요소는 2 초 동안 지속 시간, 폭 부동산에 대한 전환 효과를 지정했다 :
예
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
지정된 CSS 속성 (폭) 값을 변경하는 경우 전환 효과가 시작됩니다.
이제, 우리가 폭 속성에 대한 새 값을 지정할 때 이상의 사용자 마이스 <div> 요소 :
커서 마이스이 요소에서, 서서히 원래의 스타일로 다시 변경할 때 알 수 있습니다.
여러 속성 값을 변경
다음 예는 폭이 2 초, 높이 4 초의 지속 시간 폭 및 높이의 속성 모두에 대한 전환 효과를 추가한다 :
예
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
»그것을 자신을 시도 전환의 속도 곡선을 지정
transition-timing-function 속성은 전환 효과의 속도 곡선을 지정한다.
전환 타이밍 기능의 속성은 다음의 값을 지정할 수 있습니다 :
-
ease- 느린 시작과 전환 효과를 지정하고 빠르고, 다음 (이 기본값) 천천히 종료 -
linear- 처음부터 끝까지 같은 속도로 전환 효과를 지정합니다 -
ease-in- 느린 시작과 전환 효과를 지정합니다 -
ease-out- 느린 말과 전환 효과를 지정합니다 -
ease-in-out- 느린 시작 및 종료와 전환 효과를 지정합니다 -
cubic-bezier(n,n,n,n)- 당신은 당신의 자신의 값을 정의 할 수 있습니다 cubic-bezier 함수
다음의 예 사용될 수있는 다른 속도 곡선의 일부 보여
예
#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 {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} »그것을 자신을 시도 더 많은 전환 예
CSS3 전환 속성은 다음과 같습니다 하나 하나를 지정할 수 있습니다 :
예
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
»그것을 자신을 시도 또는 약식 속성을 사용하여 transition :
연습으로 자신을 테스트!
CSS3 전환 등록
다음 표는 모든 전이 속성을 보여줍니다 :
| 재산 | 기술 |
|---|---|
| transition | 하나의 속성에 네 개의 전이 속성을 설정하는 약식 속성 |
| transition-delay | 전환 효과에 대한 지연 시간 (초)를 지정 |
| transition-duration | 전환 효과를 완료하는 데 걸리는 초 또는 밀리 초 단위로 지정 |
| transition-property | 전환 효과가있는 CSS 속성의 이름을 지정합니다 |
| transition-timing-function | 전환 효과의 속도 곡선을 지정 |