より良いCSSアニメーション – Codepen

Josh Collinsworth wrote Ten tips for better CSS transitions and animations which is full of good practical stuff. Huge fan of #1: “Make them shorter than you think they should be”. I don’t think I’ve ever picked a transition-duration それは、私がそれで遊んだ時間と展開後であっても、それは低下しませんでした。

たくさんの素晴らしい例と現実世界のアドバイス！

「ブラウザのデフォルトを使用しないでください」などのアドバイスの一部は、より多くの特注のものに緩和を置き換える必要があることを意味します。 cublic-bezier 曲線。ジョシュは持っています より詳細な投稿 それについてもそれは非常に役立ちます。私はおそらくブラウザに頼っているのは、このことに関してはデフォルトが多すぎますが、カスタムカーブで再生すると、気分が悪くなることがあります。たぶん、私はちょうどコピロットが私に与えてくれた最初のものをとるべきではありません。実際にそれを理解してください。

聞いたことがないなら 暗くなった後、おそらく飛んでいるトースターのことを聞いたことがあります。それは、1990年代のこの象徴的なスクリーンセーバーであり、ええと、飛んでいるトースターが画面上の3Dのように見えるスペースで飛んでいます。実際、左上から左上まで。

良いニュース、ブライアン・ブラウン CSSでそれをしました、 とともに 暗いスクリーンセーバーの後のすべて。

…Annnnnd彼は2014年にそれをしました。 （私はクリックするのが好きです 貢献者 リポジトリのページは、最初のコミットの年を明確に示しています。）このようなCSSのチャンクを見ることで、ヴィンテージの感触を得ることができます。

      -webkit-animation: fly 10s linear infinite;
         -moz-animation: fly 10s linear infinite;
          -ms-animation: fly 10s linear infinite;
           -o-animation: fly 10s linear infinite;
              animation: fly 10s linear infinite;

それがまさに私たちが転がっていた方法です。

非常に新しいことアラート。私はこれについてより深いダイビングをする必要がありますが、今ここで言及する価値があると思います。私はあなたが何を知っていると思います cubic-bezier() それは、私が文字通り上記のJoshの記事にリンクしているからです。

Cubic Bezierには4つのパラメーターがあります。もうない。それ以上。

ここの新しいことはです linear() これは、アニメーションのタイミング値の代替として機能し、任意の数の値をとることができます。 Ollie Williamsには素晴らしい記事があります、そして、私は彼が撮った引用をします。それは素晴らしいクイック要約だからです：

MDN 構文について説明します： linear(0, 0.25 75%, 1) からの時間の75％をからの移行に費やす線形緩和関数を生成します 0 に .25 そして、最後の25％はから移行しています .25 に 1。」

より現実的な例は次のようになります：

animation-timing-function: linear(0, 0.218 2.1%, 0.862 6.5%, 1.114, 1.296 10.7%, 1.346, 1.37 12.9%, 1.373, 1.364 14.5%, 1.315 16.2%, 1.032 21.8%, 0.941 24%, 0.891 25.9%, 0.877, 0.869 27.8%, 0.87, 0.882 30.7%, 0.907 32.4%, 0.981 36.4%, 1.012 38.3%, 1.036,1.046 42.7% 44.1%, 1.042 45.7%, 0.996 53.3%, 0.988, 0.984 57.5%, 0.985 60.7%,1.001 68.1%, 1.006 72.2%, 0.998 86.7%, 1);

ファンシー！たぶん多分のように、これがあなたのためのツールによって生成される92％の確率があります これです、そして他の人たちが生まれる可能性があります。それを得る？春？

これらすべてのポイントは、それらの間に直線があります。これが、「線形」が名前である理由だと思います。しかし、それはあなたがそれが退屈でまっすぐな「線形」キーワードのように振る舞うだろうと思うので、それは一種のひどい名前です。しかたがない。

おそらく読むべきです CSSで複雑なアニメーション曲線を作成します linear() 緩和機能 Bramusによって。ベン・ホームズが作った 非常にクリックしたボタン クリックしてクリックします。

アダム・アーガイル 1分間の説明 おそらくあなたも正しいでしょう。

CSSネスティングが年齢になっていて、ブラウザのベンダーがこれらすべての世論調査を出して構文に投票できるようになったことを覚えていますか？一人一人が「サスのようなものになれますか？」そして、彼らは「いいえ」のようなもので、それから彼らはちょうどSASSのようにそれを作りました。

とにかく！

それが彼らがやっていたことだと思いました animation-composition ブラマスで 複数のアニメーション効果がどのように複合するかを指定します animation-composition、しかし、彼はそれをどのように使用するかを見せているだけです。

それは本当に雑草に少しですが、それは本当にアニメーションで時々起こるものです。複数のアニメーションが同じプロパティに影響する場合に役立ちます。 transform プロパティは、これを複雑にすることで有名です transform 要素を回転させているかもしれませんが、別の要素は要素を回転させている可能性があります translate それを動かしますが、彼らは過去に互いに上書きするので、要素などをネストする必要があります。今、あなたはできます replace、 add、 または accumulate 値、それは本当にかなりクールです。

私の最初のテストは、これがうまくいくと思うことでした：

button {
  position: relative;
  animation-composition: accumulate;

  &:hover {
    translate: 0 1px;
  }
  &:active {
    translate: 0 1px;
  }
}

しかし、いや、そのような擬似状態は他のものを完全に置き換えると思うので、ボタンはホバリングされていないと同時にアクティブではありませんか？私は知らないよ。正直なところ、とにかくトランジションよりもキーフレームで便利です。

わかりました、最後に約束します。優れたビデオ： アニメーションvs.数学。