まえがき

cubic-bezier を理解する前に、animation-timing-function とtransition-timing-function の重要な内容である CSS3 のアニメーション効果を理解する必要があります。

オントロジー

概要

cubic-bezier は、cubic Bezier とも呼ばれ、主にアニメーション用のスピードカーブを生成する関数です。 cubic-bezier(, , , ) として。

次の図から 3 次ベジェを簡単に理解できます:

何から上の図で知っておく必要があるのは、3 次ベジェの値の範囲です:

P0: デフォルト値 (0, 0)
P1: 動的値 (x1) , y1)
P2: 動的値 (x2, y2)
P3: デフォルト値 (1, 1)

注意が必要なのはP1とP2の値で、X軸の値の範囲は0から1のときです。値が超過範囲を超過すると、3 次ベジェは失敗します。Y 軸の値が指定されていない場合、もちろん、値が大きすぎる必要はありません。

最も直接的な理解は、を座標軸上に 1 の範囲のみの直線として配置し、その中間から 2 点を抜き出すことです (X 軸の値の範囲は [ 0, 1]、Y 軸は任意）、形成された最終的な曲線がアニメーションの速度曲線です。

の使用テスト例:

<!DOCTYPE html><html lang="zh-cn"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    .animation {      width: 50px;      height: 50px;      background-color: #ed3;      -webkit-transition:  all 2s;           -o-transition:  all 2s;              transition:  all 2s;    }    .animation:hover {      -webkit-transform:  translateX(100px);          -ms-transform:  translateX(100px);           -o-transform:  translateX(100px);              transform:  translateX(100px);    }  </style></head><body>  <div class="animation"></div></body></html>

マウスを要素上に移動すると、要素が右に移動し始めることがブラウザで確認できます。 , 最初はゆっくりと動きますが、離れると元のカーブに従って原点に戻ります。

この例では、三次ベジェまたは他のタイミング関数をトランジションに追加しない場合、デフォルトの速度曲線は次のとおりです。

次に、cubic-bezier(.17, .86, .73, .14) をコードに追加しましょう:

....animation {  ...  -webkit-transition:  all 2s cubic-bezier(.17, .86, .73, .14);       -o-transition:  all 2s cubic-bezier(.17, .86, .73, .14);          transition:  all 2s cubic-bezier(.17, .86, .73, .14);}...

ページを更新して効果を観察してください。アニメーションの実行中に非常に遅い動きがあり、その前後の速度は同じであることがわかります。このときのモーションカーブは次のとおりです。

一般的に使用されるいくつかの固定値は、3 次ベジェ値と速度曲線に対応します

ease: cubic-bezier(.25, .1, .25, 1)
ライナー: cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
イーズイン: cubic-bezier(.42, 0, 1, 1)
イーズアウト: cubic-bezier(0, 0, .58, 1)
イーズインアウト: cubic-bezier(.42, 0, .58, 1)
In Out . Back (前後のバッファリング効果): cubic -bezier(0.68, -0.55, 0.27, 1.55)

エフェクトのリファレンス

記事内で触れたアニメーションその効果は以下のサイトで見ることができます、もちろん大胆に試すこともできます:

英語版オンラインプレビュー (Lea Verou)
中国語版のオンラインプレビュー (その他の効果)
オンラインでシリーズを生成
著者の「読み込み中」ライブラリ

リファレンス

MDNW3School

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLタグとHTML属性の違いは何ですか？May 14, 2025 am 12:01 AM

htmltagsdeTheStructureOfawebpage、whiLeattributesdddddddddtetails.1）tagslike、andoutlineThecontentのsplacement.2）属性、クラス、およびスチリーンハンシテアグビーズイメージソース、スタイリング、および改善、および改善の想像力。

HTMLの未来：進化とトレンドMay 13, 2025 am 12:01 AM

HTMLの未来は、よりセマンティック、機能的、モジュール式方向に発展します。 1）セマンティック化により、タグがコンテンツをより明確に説明し、SEOとバリアのないアクセスを改善します。 2）機能化は、ユーザーのニーズを満たすために新しい要素と属性を導入します。 3）モジュール性は、コンポーネントの開発をサポートし、コードの再利用性を改善します。

Web開発にとってHTML属性が重要なのはなぜですか？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevevermentmentmentmentmentmentmentmention behavior、like、andfunctionality.theyenhance -interactivity、accessibility、andseo.forexample、thesrcattribute intagsimpactsseo

Alt属性の目的は何ですか？なぜそれが重要なのですか？May 11, 2025 am 12:01 AM

ALT属性は、HTMLのタグの重要な部分であり、画像の代替テキストを提供するために使用されます。 1.画像をロードできない場合、ALT属性のテキストが表示され、ユーザーエクスペリエンスが向上します。 2。スクリーンリーダーは、ALT属性を使用して、視覚障害のあるユーザーが写真の内容を理解するのに役立ちます。 3. ALT属性のEnginesインデックステキストを検索して、WebページのSEOランキングを改善します。

HTML、CSS、およびJavaScript：例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform