여러 속성에 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 .5s;
}

이 예에서는 높이와 불투명도가 모두 0.5초 이상 전환되지만 불투명도 전환은 0.5초 더 지연됩니다.

호환성

전환 약어는 최신 브라우저에서 널리 지원됩니다. 자세한 호환성 정보는 http://caniuse.com/css-transitions를 참조하세요.

결론

CSS 전환 약식은 여러 전환 선언을 단순화하여 CSS 애니메이션을 제어할 수 있게 해줍니다. 보다 효율적으로 속성을 관리할 수 있습니다. 브라우저 간 호환성을 위해 올바른 구문을 따르고 접두사를 사용하는 것을 잊지 마세요.

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