web-dev-qa-db-ja.com

CSS3変換および遷移（Webkit）

以下を考慮してください fiddle

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では）では移行がまったくありません。

遷移プロパティに接頭辞を付けるか、コードに何らかの構文エラーがありますか？

css3webkitcss-transitionscss-transforms
42
gregory

遷移にベンダープレフィックスを追加します。

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変換

98
Fábio Duque Silva