[css] 여러 속성을 가진 CSS 전환 속기?

여러 속성이 있는 CSS 전환 속기 의 올바른 구문을 찾을 수없는 것 같습니다 . 이것은 아무것도하지 않습니다 :

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

javascript로 show 클래스를 추가합니다. 요소가 높아지고 표시되며 전환되지 않습니다. 최신 Chrome, FF 및 Safari에서 테스트합니다.

내가 무엇을 잘못하고 있지?

편집 : 분명히하기 위해 CSS를 축소 할 수있는 속기 버전을 찾고 있습니다. 모든 공급 업체 접두사로 충분히 팽창했습니다. 예제 코드도 확장했습니다.

답변

통사론:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

지연 시간이 지정된 경우 지속 시간이 지연 시간보다 높아야합니다.

속기 선언으로 결합 된 개별 전환 :

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

또는 모두 전환하십시오.

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

다음은 간단한 예 입니다. delay 속성을 가진 또 다른 것이 있습니다 .

편집 : 이전에 여기에 나열된 호환성 및 알려진 문제는 다음과 같습니다 transition. 가독성을 위해 제거되었습니다.

결론 : 그냥 사용하십시오. 이 속성의 특성은 모든 응용 프로그램에 영향을 미치지 않으며 호환성은 전 세계적으로 94 %를 훨씬 상회합니다.

여전히 확인하려면 http://caniuse.com/css-transitions를 참조하십시오 .

답변

같은 방식으로 전환하려는 몇 가지 특정 속성이있는 경우 (예 : 전환 하지 않으려 는 속성이 있기 때문에 opacity) 다른 옵션은 다음과 같은 작업을 수행하는 것입니다 (간단히 생략).

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

두 번째 선언은 all위의 속기 선언을 무시하고 간혹 더 간결한 코드를 만듭니다.

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}

<p>Hover box for demo</p>
<div class="box"></div>

스 니펫 확장

데모

답변

나는 이것으로 일한다.

element{
   transition : height 3s ease-out, width 5s ease-in;
}

답변

불투명도 전이에 0.5 초 지연을 가짐으로써, 높이가 전이되는 전체 시간 동안 요소는 완전히 투명하게되어 보이지 않습니다. 따라서 실제로 보게 될 것은 불투명도 변화뿐입니다. 따라서 높이 속성을 전환에서 제외하는 것과 동일한 효과를 얻을 수 있습니다.

“전환 : 불투명도 .5s .5s;”

그것이 당신이 원하는 것입니까? 그렇지 않은 경우 높이 전환을보고 싶은 경우 전체 전환 시간 동안 불투명도를 0으로 설정할 수 없습니다.

답변

이를 통해 애니메이션에 필요한 것만 이해하고 능률화했습니다.

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ ‘.base’클래스 내의 모든 전환 속성 (지속 시간, 전환 타이밍 기능 등)에 적용됩니다.

답변

나는 이것과 함께 일한다고 생각한다.

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;