アニメーションと変形

ボックスアニメーション

単純なアニメーション:多くの場合、「移行の移行」と呼ばれる簡単なアニメーション - CSSプロパティ、時間をかけて、別の値に1つの値から変化します。

勾配時間関数:遷移タイミング機能

すべてのプロパティは、トランジション、色、サイズをサポートするためにありませんバックグラウンドの高さやトランジションを適用するには、クラスの透明性は、通常、トランジション効果をサポートしています。

ベジェ曲線:立方ベジェベジェ曲線は、固定されたCSS、第一点及び第四の点における曲線の4つの基準点によって描かれ、ユーザは、第2の点と第3の曲線を設定することができ縦軸は勾配の軌跡を表し、横軸は時間を表します

示例:遷移タイミング機能:立方ベジェ(0.25,0.1,0.25,1)

デフォルトのベジェ曲線:

(0.25,0.1,0.25,1)速くなって、均一な、遅い立方ベジエイーズ

徐々に使いやすさに速く、均一な立方ベジエ(0.42,0,1,1を)

容易アウト均一に、立方ベジェを遅らせる(0,0,0.58,1)

インアウト緩和等を容易にするが、加速度容易立方ベジェより(大振幅)(0.42,0,0.58,1)

線形完全に均一な立方ベジェ(0,0,1,1)

複雑なアニメーション

プロパティに関連します:

アニメーション名:アニメーションの名前

アニメーション-期間:1つのムービーの合計時間

アニメーションのタイミング機能:時間の関数

アニメーションの遅延:長い再生する前の遅延時間

アニメーションの繰り返しカウント:ビュー特別な値:無限

アニメーションの方向:再生シーケンス

ノーマル:ノーマルプレイ

代替:逆転劇を回します

ボックスの変形:

視覚効果は、ボックスの変形によって変更することができるボックス視覚効果を変形させることによって変更することができます。

どのように変形:

カセットのtransformプロパティのCSSによって変更することができます

変換-原点の原点を定義します。

位置は、いくつかの変形の影響起点を有するであろう

箱の起源により提供されるCSSプロパティを起源に変換することができます。

この属性のデフォルト値はボックスの中心である、配置が背景位置に非常によく似ています

変形カテゴリ:

回転(回転)拡大縮小(スケール)モバイル(翻訳)傾斜(スキュー)

その他の属性:

遠近距離:パースペクティブはこのプロパティは、変形可能な要素の親要素に設定されています

可視性裏面:裏面視認性

 表示:デフォルトでは、背中が見えます

 隠された:背中が見えません

おすすめ

転載: www.cnblogs.com/tcq43356/p/11300575.html