0

わかりました、次のアニメーション キーフレームがあるとします。

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    transform: none;
  }
}

このアニメーションが最新のブラウザと互換性があることを確認するにはどうすればよいですか??
キーフレームの前にいくつのプレフィックスを適用する必要があるかを知るにはどうすればよいですか??
キーフレームをサポートしているがプレフィックスのみをサポートしているブラウザーはどこですか??
また、接頭辞なしでこのプロパティをサポートするブラウザはどれですか。

素敵なサイトを見つけました :使えますか

しかし、このサイトから最も効率的な方法で、どのプロパティがプレフィックス付きのブラウザーとプレフィックスなしのブラウザーでサポートされているかを抽出するにはどうすればよいでしょうか??

私はそのようにスキャンしましたが、この質問は尋ねられませんでした。それは本当に重要な質問ですが、プレフィックスも処理する崇高なテキストで Emmet を使用しますが、特にブラウザーのサポートが増加すると、それらは時代遅れになることがあります。自分自身を見つけて、よりよくコントロールするのが好きです。

私の質問に疑問がある場合は、質問のタイトルを参照してください。

編集 ：：

もう少し明確にするために、次のような単純なチャートがあるとします。

ブラウザのサポート

(上記のチャートは caniuse.com から取得したものです)。

プレフィックスが必要なブラウザと不要なブラウザを特定するにはどうすればよいですか。

ところで、JS プラグインの使用と grunt の使用に関する回答はどれも素晴らしいように聞こえますが、私にとっては少し上級者向けです。

とてもシンプルでシンプルです。手動で追加するプレフィックスを決定する方法. ??

ありがとう。

アレクサンダー

4

3 に答える 3

1

すばやく簡単に使用プレフィックス フリー: CSS ベンダー プレフィックス地獄から抜け出しましょう!

cdnjsでも入手できます

于 2015-01-22T10:28:32.817 に答える
1

個人的には、Gruntを開発に使用しています。多くの優れた機能 (少ないコンパイル、js の縮小など) があり、 Grunt Auto Prefixerというまさに必要なことを行うツールも利用できます。「can I use」のデータベースを使用し、必要に応じてプレフィックスを追加し、廃止されたものを削除します。サポートするブラウザのバージョンを指定するだけです。

正しく設定すると、変更をcssファイルに保存するとすべてが自動的に行われ、ブラウザはページを更新せずにcssを自動的にリロードします.

最初は少し複雑に思えるかもしれませんが、Grunt はそれほど難しくなく、世の中にはたくさんの情報と優れたツールがあります。それは本当にチェックする価値があります！

于 2015-01-22T10:37:27.147 に答える
1

追加する必要があるプレフィックスはかなり標準的です。

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
    -webkit-transform: translate3d(3000px, 0, 0);
    -o-transform: translate3d(3000px, 0, 0);
    -moz-transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
    -webkit-transform: translate3d(-25px, 0, 0);
    -o-transform: translate3d(-25px, 0, 0);
    -moz-transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
    -webkit-transform: translate3d(10px, 0, 0);
    -o-transform: translate3d(10px, 0, 0);
    -moz-transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
    -webkit-transform: translate3d(-5px, 0, 0);
    -o-transform: translate3d(-5px, 0, 0);
    -moz-transform: translate3d(-5px, 0, 0);
  }

  100% {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
  }
}

自分でコーディングできるのに、なぜjsのライブラリ全体をロードするのですか?!

于 2015-01-22T11:20:48.587 に答える