CSS3 전환

CSS3 전환

CSS3, 우리는 플래시 애니메이션 또는 자바 스크립트를 사용하지 않고, 다른 시간에 하나의 스타일로 변환 할 수있는 효과를 추가해야한다. 다음과 같은 요소를 마우스 :

다음과 같은 요소를 마우스 :

브라우저 지원

표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.

즉시 디지털 -webkit- 이어 -ms- 또는 접두어 지원 전 -moz- 우선 브라우저 버전 번호 때문이다.

그것은 어떻게 작동합니까?

CSS3 전환은 요소가 점차적으로 다른 효과를 하나의 스타일로 변경합니다.

이를 위해 두 가지를 정의해야합니다 :

• 나는 CSS 속성의 효과를 추가 할
• 효과의 지속 시간을 지정합니다.

예

폭 속성은 전환 효과, 이초의 기간을 적용 :

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

참고 : 제한 시간을 지정하지 않으면, 디폴트 값은 0이기 때문에, 전이는 영향을 미치지 않는다.

효과는 지정된 CSS 속성 변화의 값을 변경한다. 일반적인 CSS 속성 변경 요소를 통해 사용자의 마우스입니다 :

예

규정 할 때 마우스 포인터 서스펜션 (: 호버)의 <DIV> 요소에 때 :

사업부 : 가져
{
폭 : 300 픽셀;
}

»시도

주 : 소자에 마우스 커서가, 서서히 원래의 스타일을 변경하면

변경 수

변경 스타일 이상의 효과를 추가하려면 쉼표로 구분하여 속성을 추가 :

예

추가 너비, 높이 및 전환 효과 :

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

»시도

전환 등록

다음 표는 모든 전이 속성을 보여줍니다 :

다음 두 예제 모두 전환 속성을 설정합니다

예

하나의 예에있는 모든 전환 속성을 사용하여

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

»시도

예

그리고 위와 같은 전환 효과의 예,하지만 속기 전환 속성을 사용합니다 :

div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}

»시도