단일 요소에서 여러 CSS 전환을 동시에 작동시키는 방법은 무엇입니까?

요소의 여러 CSS 전환

주어진 HTML 스니펫에서 제공된 CSS 전환이 서로 덮어쓰는 것으로 나타나 마우스를 올리면 애니메이션 효과가 나타나는 텍스트 그림자 효과입니다. 색상과 텍스트 그림자의 동시 애니메이션을 활성화하려면 조정이 필요합니다.

해결책:

1. 쉼표로 구분된 전환 속성 사용:

CSS의 전환 속성은 쉼표로 구분될 수 있습니다. 이 기술을 사용하면 독립적으로 전환되는 여러 속성을 지정할 수 있습니다. 코드를 업데이트하는 방법은 다음과 같습니다.

.nav a {
  transition: color .2s linear, text-shadow .2s linear;
}

2. 선형 타이밍 기능을 명시적으로 지정:

선형 타이밍 기능이 기본값이지만 명확성을 위해 명시적으로 지정하는 것이 좋습니다. 두 전환 모두 선형 진행을 따르도록 다음 줄을 추가합니다.

transition-timing-function: linear;

3. Transition-* 속성 사용(선택 사항):

여러 속성이 포함된 복잡한 전환의 경우 약식 구문 대신 전용 Transition-* 속성을 사용하는 것이 더 깔끔한 경우가 많습니다. 예는 다음과 같습니다.

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

결과:

이러한 변경을 통해 앵커 요소 위로 마우스를 가져갈 때 색상 및 텍스트 그림자 속성이 모두 부드럽게 전환됩니다. .nav 목록. 애니메이션이 동시에 독립적으로 실행되어 더욱 역동적인 효과를 얻을 수 있습니다.

위 내용은 단일 요소에서 여러 CSS 전환을 동시에 작동시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!