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. 전환 타이밍 기능 - 모션 형태 지정
전환 타이밍 기능: 이즈(점진적으로 느려짐) | 선형(일정한 속도) | | 감속(감속) | 가속(가속한 후 감소)
5. 전환 종합 작성 방법
[css]요소 선택자 {전환: 모션 스타일, 지속 시간, 모션 형식, 지연 시간;}
6. 포괄적이고 호환 가능한 전환 작성 방법
1. Mozilla 커널[css]
요소 선택기 {-moz-transition: 모션 스타일, 지속 시간, 모션 형식, 지연 시간;}
[css]
요소 선택기 {-webkit-transition: 모션 스타일, 지속 시간, 모션 형식, 지연 시간;}
[css]
요소 선택기 {-o-transition: 모션 스타일, 지속 시간, 모션 형식, 지연 시간;}
[css]
요소 선택기 {전환: 모션 스타일, 지속 시간, 모션 형식, 지연 시간;}
효과 예: