CSS3 요소의 전환 속성에 대한 자세한 소개

TransitionAnimation은 애니메이션의 기본

애니메이션property
transition 속성을 먼저 이해해야 합니다

전환

먼저 작은 예를 살펴보겠습니다

<p class="demo"></p>

.demo {    width: 100px;    height: 100px;    background-color: royalblue;}.demo:hover {    width: 200px;}

이렇게 하면 데모 위에 커서를 올리면
폭이 200px이 됩니다

커서가 요소 위에 있을 때 요소의 너비가 서서히 넓어지도록 하는 방법이 있나요?
CSS3 이전에는 번거로운 js스크립트
만 사용할 수 있었지만 이제는 필요한 것만 필요합니다.
속성을 ​​추가하면

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s; /*增*/}.demo:hover {    width: 200px;}

전환 목적을 달성할 수 있습니다. 그 기능은 요소의 특정 스타일이 변경될 때
이러한 스타일이 점진적으로 최종 속성 값
으로 전환될 수 있도록 지정하는 것입니다. 🎜>

복합 속성입니다

에는 다음과 같은 하위 속성이 있습니다

• transition-property: 전환 또는 동적 시뮬레이션을 지정하는 CSS 속성

• transition-duration: 전환에 필요한 시간 지정

• transition-timing-function: 전환 지정

  기능

• transition-delay: 나타나기 시작하는 지연 시간을 지정합니다.

transition-property 전환하려는 속성을 쓸 수 있습니다

또는 간단히 전환 쓰기 모든 속성의 키워드
all

전환 지속 시간 그라데이션 시간 속성 값은 "숫자 + s"입니다.

몇 초 안에 전환을 나타냅니다

전환 타이밍 함수는 다음과 같은 선택적 값을 갖는 선택적 속성 값입니다.

• 선형

  선형 전환, 등가 베지어 곡선(0.0, 0.0, 1.0, 1.0)
  

• ease(기본값)

  부드러운 전환, 등가 베지어 곡선(0.25, 0.1, 0.25, 1.0)
  

• ease-in

  느린 것에서 빠른 것까지, 베지어 곡선(0.42, 0, 1.0, 1.0)과 동일
  

• ease-out

  빠른 것에서 느린 것까지, 베지어 곡선(0, 0)과 동일 , 0.58, 1.0)
  

• ease-in-out

  느린 것에서 빠른 것, 다시 느린 것, 베지어 곡선(0.42, 0, 0.58 , 1.0)과 동일
  

• step-start

  는 steps(1, start)
  

• step-

  end 와 같습니다. steps(1, end)
  

• steps():

  두 매개변수의 단계 함수입니다. 첫 번째 매개변수는 양수
  정수 로, 기능 단계 수를 지정합니다. 두 번째 매개변수의 값은 start 또는 end로, 각 단계의 값이 변경되는 시점을 지정합니다. 두 번째 매개변수는 선택사항이며 기본값은 end입니다.

• cubic-bezier(num, num, num, num):

  특정 베지어 곡선 유형, 4개의 값은 간격 [0, 1] 내에 있어야 합니다.
  

가장 일반적으로 사용되는 것은 기본 용이성 및 선형 전환입니다.

transition-delay도 선택적 속성 값입니다

전환을 지연시키려는 경우, 즉 전환 전에 잠시 중지하려면
이 복합 속성 끝에 "숫자 + s"를 지연하는 데 필요한 시간을 추가하세요

이 속성은 여러 가지 다른 속성을 설정할 수 있습니다

쉼표로 구분하기만 하면 됩니다

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s linear, 
                height 1s linear,
                background-color 2s 1s; /*改*/}.demo:hover {    width: 200px;    height: 200px;    background-color: lawngreen; /*改*/}

마우스가 요소 밖으로 이동한 후 요소가 다시 전환됩니다

스크립트 대신 전환 속성을 사용하는 또 다른 이유는

여러 요소의 스타일을 변경하는 스크립트 메서드가 충돌을 일으킬 수 있기 때문입니다
해결책은 bool
변수를 사용하는 것입니다. 여전히 매우 어려운 잠금 문제 우리의
전환 속성은 그다지 고려할 필요가 없습니다요소가 서로 영향을 미치지 않습니다

---

또 주목해야 할 사항 요소 전환에는 스타일의 특정 시작 및 끝 속성을 알아야 합니다

예를 들어, 우리 예의 너비는 100px에서 200px로 명확하게 전환됩니다.

.demo:hover {    width: auto; /*改*/
    height: 200px;    background-color: lawngreen; /*改*/}

플로팅 스타일 너비를 자동으로 변경합니다

우리는 커서가 요소를 가리키면 마지막
너비 속성이 전환되지 않습니다.

전환과 관련된 속성

물론 모든 스타일을 전환할 수 있는 것은 아닙니다

예를 들어 다음과 같은 경우 <a href="http://www.php.cn/wiki/927.html" target="_blank">display<br>:block</a> <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:blockdisplay:inline-block으로 전환하고 싶습니다. 그건 불가능합니다
예 다음 속성은 전환에 참여합니다

• color

• visibility

• 불투명도

• 세로 정렬

• z-색인

• 클립

• 너비/높이

• 상단/하단/왼쪽/오른쪽

• 배경색/위치

• 테두리 - 위쪽/아래쪽/왼쪽/오른쪽 색상/너비

• 테두리/문자/단어 간격

• 글꼴 크기/굵기

• 줄 높이

• 여백/패딩 상단/하단/왼쪽 /right

• 최대/최소 높이/너비

• 윤곽선-색상/너비

• text-indent/shadow

이 속성이 정말 강력하다는 것을 알 수 있습니다

위 내용은 CSS3 요소의 전환 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!