web-dev-qa-db-ja.com

CSS3の弾性緩和、最良のアプローチ

CSS3で 弾性緩和関数 をエミュレートしたいと思います。 CSS3はこれをネイティブにサポートしていないため、独自のキーフレームを考え出しました。okayに見えますが、完全に自然ではありません。

追加のJavaScriptスクリプトを必要とするソリューションは必要ありません。 StackOverflowに関する他のすべての投稿には、JSソリューションが受け入れられています。

純粋なCSS3でエラスティックイージングを実装する最良の方法は何ですか？

これがこれまでの私の仕事です、それが誰かを助けるなら...

https://jsfiddle.net/407rhhnL/1/

赤、緑、青の等尺性の直角プリズムをアニメーション化しています。次のCSS3キーフレームをハードコーディングして、弾性緩和を​​手動でシミュレートしました。

@include keyframes(popup) {
  0% {

  }

  20% {
    transform: translateY(-50px);
  }

  40% {
    transform: translateY(20px);
  }

  60% {
    transform: translateY(-6px);
  }

  90% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(0px);
  }
}

このコードの調整に関する提案を探しているのではなく、ハードコーディングよりも優れたソリューションがあるかどうかを知りたいです。

css3css-animations
14
Jimmie Tyrrell

ブラウザの制限に応じて（およびCSS3を使用している場合は関係なく問題ありません）、代わりに cubic-bezier（） キーワードを使用してイージングトランジションを実際に適用できます。

アニメーションの例は次のようになります。

transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transition-duration: 2.9s;

Lea Verouのブログ投稿 はこれをかなりよくカバーしています。

19
Phil.Wheeler

多くのすばらしいキュービックベジェ遷移がここにあります：

http://easings.net/

このようなものがあなたが望むものかもしれません：

transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
8
Rowan