한 요소에서 여러 CSS 전환을 동시에 작동시키려면 어떻게 해야 합니까?

요소의 다중 CSS 전환

CSS에서 전환을 사용하면 시간이 지남에 따라 지정된 속성의 값을 점진적으로 변경하여 부드러운 애니메이션을 구현할 수 있습니다. 그러나 동일한 요소에 여러 전환이 적용되면 후속 전환이 이전 전환을 덮어쓸 수 있습니다.

다음 CSS 코드 조각을 고려하세요.

.nav a {
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover {
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

이 코드에서 두 색상 모두 및 텍스트 그림자 속성에는 전환 효과가 정의되어 있습니다. 문제는 두 번째 전환이 첫 번째 전환을 덮어쓴다는 것입니다. 결과적으로 텍스트 그림자 애니메이션이 발생하지만 색상 애니메이션은 발생하지 않습니다.

이 문제를 해결하고 두 전환이 동시에 작동하도록 하려면 CSS 전환 속성을 함께 사용하세요. 방법은 다음과 같습니다.

쉼표로 구분된 전환 속성

전환을 지원하는 모든 브라우저에서 전환 속성은 쉼표로 구분될 수 있습니다. 여러 속성을 쉼표로 구분하면 두 전환이 동시에 트리거될 수 있습니다.

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

이징 기능 지정

기본적으로 전환은 이즈 타이밍 기능을 사용합니다. 선형과 같은 다른 타이밍 기능을 사용하려면 명시적으로 지정해야 합니다.

transition: color .2s linear, text-shadow .2s linear;

전환 속성 약어

동일한 타이밍 및 타이밍 기능을 사용할 때 더 깔끔한 접근 방식을 위해 속성이 여러 개인 경우 속기 대신 전환-* 속성을 활용하세요.

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

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