[animation] 요소에서 여러 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);
}

보시다시피 전환 속성이 서로 덮어 씁니다. 텍스트 그림자는 색상이 아닌 애니메이션으로 표시됩니다. 둘 다 동시에 애니메이션을 만들려면 어떻게해야합니까? 답변 주셔서 감사합니다.

답변

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

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

ease기본 타이밍 기능이므로 지정할 필요가 없습니다. 정말로 원한다면 linear지정해야합니다.

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

이것은 반복적으로 시작되기 때문에 여러 속성에서 동일한 시간과 타이밍 함수를 사용 transition-*하려면 속기 대신 다양한 속성을 사용하는 것이 가장 좋습니다 .

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

답변

다음과 같이 간단하게 크게 할 수도 있습니다.

.nav a {
    -webkit-transition: all .2s;
}

답변

다음과 같은 것은 동시에 여러 전환을 허용합니다.

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

예 : http://jsbin.com/omogaf/2

답변

모든 속성을 동일하게 애니메이션으로 만들면 코드를 반복하지 않도록 각각을 개별적으로 설정할 수 있습니다.

 transition: all 2s;
 transition-property: color, text-shadow;

여기에 더 많은 것이 있습니다 : 여러 속성을 가진 CSS 전환 속기?

원치 않는 동작과 예기치 않은 성능 저하로 이어질 수 있으므로 all 속성 (전환 속성이 ’all’을 덮어 씁니다)을 사용하지 마십시오.

답변

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

답변

다음은 두 가지 속성을 한 번에 전환하기위한 LESS 믹스 인입니다.

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
 -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
      -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
          transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}

답변

지속 시간, 지연 및 타이밍 기능에 대해 서로 다른 값으로 여러 전환을 설정할 수 있습니다. 다른 전환을 분할하려면,

button{
  transition: background 1s ease-in-out 2s, width 2s linear;
  -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}

참조 : https://kolosek.com/css-transition/