CSS의 전환 속성이 ​​작동하지 않는 이유와 해결 방법

CSS의 전환 속성을 사용하면 요소가 변경되는 시간을 조정할 수 있으며 애니메이션처럼 나타날 수 있습니다. 전환 속성은 쉽게 전환 효과를 얻을 수 있지만 때로는 유효하지 않을 수도 있으므로 전환 속성의 작성 규칙을 이해해야 합니다.

CSS에서 전환 속성이 ​​작동하지 않는 이유를 먼저 살펴보겠습니다.

Transition은 변경 시간 등을 지정할 수 있는 속성입니다.

마우스 커서를 버튼 위에 올렸을 때 색상 및 크기가 변경되는 타이밍을 설정하는 데 사용하면 애니메이션과 같은 효과를 낼 수 있습니다.

전환 형식은 다음과 같습니다.

选择器名称{ 
    transition-property：value; 
    }

지정 가능한 값은 다음과 같습니다.

all: 전환에 적용되는 모든 속성을 지정할 수 있습니다.

none: 속성이 변경되지 않았습니다.

속성 이름: 변환이 적용될 속성 이름을 지정합니다. 여러 개는 쉼표를 통해 지정할 수 있습니다.

전환이 작동하지 않는 많은 이유는 일반적으로 호버 이벤트의 전환에 대한 설명이므로 더 주의하세요.

일부 효과는 애니메이션 모션을 구현할 수 있으므로 전환 속성을 사용하여 쉽게 구현할 수 있습니다.

전환 속성

의 구체적인 사용법을 살펴보겠습니다. 위에서 언급했듯이 호버 이벤트에서는 전환 속성을 사용하지 마세요.

HTML

<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>

CSS

p {
  width:100px;
  background-color:red;
  transition-duration: 2s;
  transition-property:width;
}
p:hover {
  width:420px;
  background-color:blue;
}

마우스를 올려 놓지 않았을 때 브라우저에 표시되는 효과는 다음과 같습니다

빨간색 배경에 마우스를 올려놓았을 때 브라우저에 표시되는 효과는 다음과 같습니다.

p 태그는 width: 100px 및 background-color: red를 지정합니다. 이 경우 너비가 100px이면 배경은 빨간색입니다. 전환 기간은 다음과 같이 지정됩니다. 2초;

이 경우 전환을 통해 달성되는 효과의 시작부터 끝까지의 시간은 2초입니다.

마지막은 전환 속성:너비입니다. 전환 속성을 적용하면 너비만 적용됩니다.

: 마우스 오버 시 너비: 420px 및 배경색: 파란색을 지정합니다. 이렇게 하면 마우스를 위로 이동하면 너비가 420px이 되고 배경이 파란색이 됩니다.

마우스를 위로 올리면 너비가 420px이 되고 배경은 파란색이 되지만 전환 효과는 너비에만 적용됩니다. 2초의 변화는 너비뿐입니다. 지정된 배경색에는 전환 효과가 적용되지 않으므로 해당 배경색 위로 마우스를 가져갈 때마다 파란색으로 변합니다.

위 내용은 CSS의 전환 속성이 ​​작동하지 않는 이유와 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!