여러 속성에 대해 CSS 전환 약어를 올바르게 사용하는 방법은 무엇입니까?

여러 속성에 CSS 전환 약어를 사용하는 방법

CSS 전환 약어를 사용하면 단일 선언에 여러 전환 속성을 지정할 수 있습니다. 이는 작성해야 하는 코드의 양을 줄이는 데 유용할 수 있습니다. 그러나 올바른 구문을 찾는 것이 어려울 수 있습니다.

잘못된 단축 구문

제공된 코드 조각은 CSS 전환 단축을 잘못 사용합니다.

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
}

문제는 불투명도 전환의 세 번째 매개변수에 있습니다. 기간 이후에는 지연을 지정할 수 없습니다.

올바른 약어 구문

여러 속성이 있는 CSS 전환 약어의 올바른 구문은 다음과 같습니다.

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

지연 기간이 지연 시간보다 앞에 와야 한다는 점에 유의하세요. 지정됩니다.

예

약칭을 사용하여 요소의 높이와 불투명도를 모두 전환하려면 다음과 같이 작성합니다.

.element {
  transition: height 0.5s, opacity 0.5s;
}

또는, 요소의 모든 CSS 속성을 한 번에 전환할 수 있습니다.

.element {
  transition: all 0.5s;
}

By CSS 전환 약어를 사용하면 CSS 코드를 단순화하고 전환을 정의하는 데 걸리는 시간을 줄일 수 있습니다.

위 내용은 여러 속성에 대해 CSS 전환 약어를 올바르게 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!