여러 CSS 전환 효과를 구현하는 방법

Question

이 질문은 매우 간단하지만 CSS 전환 속성에 대한 적절한 문서를 찾을 수 없습니다. 다음은 CSS 스니펫입니다.

.nav a
{
    텍스트 변환:대문자;
    텍스트 장식:없음;
    색상:#d3d3d3;
    줄 높이:1.5em;
    글꼴 크기:.8em;
    표시:블록;
    텍스트 정렬:가운데;
    텍스트 그림자: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: 색상 .2s 선형;
    -moz-전환: 색상 .2s 선형;
    -o-전환: 색상 .2s 선형;
    전환: 색상 .2s 선형;
    -webkit-transition: 텍스트 그림자 .2s 선형;
    -moz-전환: 텍스트 그림자 .2s 선형;
    -o-전환: 텍스트 그림자 .2s 선형;
    전환: 텍스트 그림자 .2s 선형;
}

.nav a:호버
{
    색상:#F7931E;
    텍스트 그림자: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

보시다시피 전환 속성은 서로를 덮어씁니다. 현재 텍스트 그림자에는 애니메이션이 적용되지만 색상에는 애니메이션이 적용되지 않습니다. 어떻게 동시에 애니메이션을 만들 수 있나요? 답변해 주셔서 감사합니다.

Answer 1

수정: 이 게시물을 삭제하는 것이 망설여집니다. CSS 구문을 이해하는 측면에서 all가 존재한다는 사실을 사람들에게 알리는 것이 좋으며 CSS의 구조에 따라 백만 개의 개별 선언보다 더 나을 수도 있습니다. 반면에 이 가설을 뒷받침하는 데이터는 본 적이 없지만 성능 저하가 있을 수 있습니다. 지금은 그대로 두겠습니다. 하지만 사람들이 그것이 양방향 거리라는 것을 깨닫기를 바랍니다.

원본 게시물:

다음 코드를 간단히 사용할 수도 있습니다:

으아아아

FWIW: 지정하지 않으면 all是默认的，所以transition: .2s;가 기본값이므로 transition: .2s;도 동일한 효과를 얻을 수 있습니다.

Answer 2

전환 효과를 지원하는 모든 브라우저에서 전환 속성은 쉼표로 구분됩니다.

으아악

ease 是默认的时间函数，所以你不需要指定它。如果你真的想要 linear, 다음을 명시적으로 지정해야 합니다.

으아악

이것은 반복되기 시작하므로 여러 속성에서 동일한 시간 및 시간 함수를 사용하려는 경우 속기 대신 다양한 transition-* 속성을 사용하는 것이 좋습니다.

으아악