42

次のフィドルを考えてみましょう

p {
  -webkit-transform: translate(-100%, 0);
     -moz-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  -webkit-transition: transform 1s ease-in;
     -moz-transition: transform 1s ease-in;
       -o-transition: transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover + p {
  -webkit-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

移行はFFでスムーズに機能しますが、SafariまたはChrome（私のMac）ではまったく移行しません。

接頭辞としてtransitionプロパティがありますか、それともコードに何らかの構文エラーがありますか？

4

1 に答える 1

99

トランジションにベンダープレフィックスを追加します。

p {
  -webkit-transform: translate(-100%, 0);
     -moz-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  -webkit-transition: -webkit-transform 1s ease-in; /* Changed here */ 
     -moz-transition: -moz-transform 1s ease-in;
       -o-transition: -o-transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover + p {
  -webkit-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

更新（2014年5月6日）

いくつかのコメントに答えるために、を省略した理由-ms-transitionは、それが存在したことがないということです。

小切手：

使ってもいいですか？トランジション、

使ってもいいですか？変換、

MDNトランジション、

MDN変換

于 2012-12-08T22:09:10.193 に答える