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

여러 속성을 사용한 CSS 전환: 단축 구문 설명

CSS 전환 단축 구문을 사용하면 여러 속성을 동시에 전환할 수 있습니다. 그러나 주어진 예에 제공된 구문은 올바르지 않습니다.

약식 구문 구조:

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

참고: 기간은 지연이 지정된 경우 지연.

주어진 구문에 대한 올바른 약어 구문 예:

transition: height 0.5s, opacity 0.5s 0.5s;

이 구문은 다음을 나타냅니다.

• 높이 속성이 0.5초에 걸쳐 전환됩니다.
• 불투명도 속성이 0.5초에 걸쳐 전환됩니다. 0.5의 지연으로 초.

간단한 구문:

모든 속성을 동시에 전환하는 경우 다음과 같은 단순화된 단축 구문을 사용할 수 있습니다.

transition: all 0.5s;

올바른 코드 예 구문:

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

이 업데이트된 코드는 이제 요소의 높이와 불투명도를 부드럽게 전환해야 합니다.

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