충돌 없이 요소에 여러 CSS 전환을 적용하려면 어떻게 해야 합니까?

요소의 여러 CSS 전환

요소에 여러 CSS 전환을 적용할 때 하나의 속성이 애니메이션을 덮어쓰는 충돌이 발생할 수 있습니다. 또 다른.

다음 CSS를 고려해보세요. snippet:

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

이 예에서는 텍스트 그림자 애니메이션이 컬러 애니메이션을 덮어씁니다. 이 문제를 해결하고 동시 애니메이션을 활성화하려면 전환 속성을 쉼표로 구분하세요.

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

또는 전환 속성, 전환 기간 및 전환 타이밍 기능과 함께 단축 전환 속성을 사용할 수 있습니다. 애니메이션 매개변수를 지정하려면:

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

이 접근 방식은 더 큰 유연성을 제공하며 개별 속성에 대한 애니메이션 설정을 제어할 수 있습니다.

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