CSS 속기를 사용하여 여러 속성을 동시에 전환하려면 어떻게 해야 합니까?

약칭을 사용하여 여러 CSS 속성 전환

CSS에서 전환 속성은 여러 속성을 동시에 전환할 수 있는 편리한 약칭을 제공합니다. 이렇게 하면 코드를 단순화하고 더 간결하게 만들 수 있습니다. 단축어를 사용하려면 다음 구문을 따르세요.

transition: <property> || <duration> || <timing-function> || <delay> [, ...];</delay></timing-function></duration></property>

지정된 경우 기간은 지연보다 앞에 있어야 합니다.

특정 속성에 단축 전환 적용:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

모두 전환 중 속성:

다음 약어로 모든 속성을 전환할 수 있습니다.

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

예:

다음 예를 고려하세요.

.element {
  transition: height 0.5s, opacity 0.5s 0.5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

이 예에서 show 클래스를 추가하면 요소의 높이가 전환됩니다.

참고: 전환 호환성이 우수하므로(전 세계적으로 94% 이상) 일반적으로 사용하는 것이 안전합니다. 호환성이 걱정된다면 https://caniuse.com/css-transitions를 참고하세요.

위 내용은 CSS 속기를 사용하여 여러 속성을 동시에 전환하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!