CSS3의 Transition 속성에 대한 자세한 설명 및 예제_CSS/HTML 공유

1. Transition-property 구문
[css]
transition-property: all (모든 속성 변경됨) || [attr] (이동할 스타일 지정) || 없음(속성 변경 없음)

2. 전환 속성의 속성 값
(1) 없음: 전환 실행이 즉시 중지됩니다.
(2) 모두: 요소의 속성 값이 변경되면 전환 효과가 실행됩니다.
( 3) attr : 이동할 스타일을 지정합니다

1. 전환 속성 ——이동할 스타일을 지정합니다

　1. 전환 속성 구문
[css]
transition-property: all(모든 속성 변경됨) || [attr](이동할 스타일 지정) || 없음(변경된 속성 없음)

2. 전환 속성의 속성 값
(1) 없음: 전환 실행이 즉시 중지됩니다.
(2) 모두: 요소의 속성 값이 변경되면 전환 효과가 실행됩니다.
( 3) attr : 이동할 스타일을 지정합니다

2. 전환 기간
전환 기간은 지정된 요소 변환 프로세스의 기간(초)입니다. 전환 기간은 :before 및 :after

를 포함한 모든 요소에서 작동할 수 있습니다.

의사 요소. 기본값은 0이며 이는 변환이 즉시 이루어짐을 의미합니다.

3. Transition-delay - 지연 시간
Transition-delay는 애니메이션이 실행되기 시작하는 시간, 즉 애니메이션을 변경한 후 전환을 시작하는 데 걸리는 시간을 지정하는 데 사용됩니다. 요소 속성 값. 효과, 단위는 s(초)

사용법은 전환 기간과 매우 유사하며 :before 및 :after 의사 요소를 포함한 모든 요소에 적용될 수도 있습니다. 기본 크기는 "0"입니다. 이는 변환이 즉시 실행된다는 의미입니다.

지연되지 않습니다.

4. 전환 타이밍 기능 - 모션 형태 지정
전환 타이밍 기능: 이즈(점진적으로 느려짐) | 선형(일정한 속도) | | 감속(감속) | 가속(가속한 후 감소)

속도) | 3차 베지어(이 값을 사용하면 시간 곡선을 사용자 정의할 수 있음)(숫자, 숫자, 숫자, 숫자>)

5. 전환 종합 작성 방법
[css]요소 선택자 {전환: 모션 스타일, 지속 시간, 모션 형식, 지연 시간;}

6. 포괄적이고 호환 가능한 전환 작성 방법

　1. Mozilla 커널

[css]
요소 선택기 {-moz-transition: 모션 스타일, 지속 시간, 모션 형식, 지연 시간;}

　2. 웹킷 커널

[css]
요소 선택기 {-webkit-transition: 모션 스타일, 지속 시간, 모션 형식, 지연 시간;}

　3. 오페라 커널

[css]
요소 선택기 {-o-transition: 모션 스타일, 지속 시간, 모션 형식, 지연 시간;}

　4. W3C 표준

[css]
요소 선택기 {전환: 모션 스타일, 지속 시간, 모션 형식, 지연 시간;}

효과 예:

코드 복사 코드는 다음과 같습니다.

a{transition:all .6s easy- 인-아웃 ;-webkit-transition:모든 .6s 이지 인 아웃;-moz-transition:모든 .6s 이지 인 아웃;-o-transition:모든 .6s 이지 인 아웃;-ms-transition :all .6s 이지인아웃;}