☰

複数のプロパティを持つ CSS トランジションのショートカット? 質問する

tag-icon • tag-icon css webkit css-transitions shorthand
複数のプロパティを持つ 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 を縮小するための短縮版を探しています。ベンダー プレフィックスが多すぎて、CSS が肥大化しています。サンプル コードも拡張しました。

ベストアンサー1

構文：

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;

ここはわかりやすい例もう一つあります遅延プロパティを持つ。

編集:以前ここに記載されていたのは、 に関する互換性と既知の問題でしたtransition。読みやすくするために削除しました。

結論: とにかく使用してください。このプロパティの性質はすべてのアプリケーションで互換性があり、互換性は現在世界中で 94% をはるかに超えています。

それでも確実に知りたい場合は、http://caniuse.com/css-transitions

おすすめ記事