CSS3アニメーションとアニメーションJS

CSS3アニメーション

アニメーションは6つのアニメーションのプロパティを設定するための短縮形プロパティです。

アニメーション名の規則は、セレクタのキーフレーム名にバインドする必要があります
それはのアニメーションが完了するまでのアニメーション - 継続指定された時間
速度プロファイルを所定のアニメーションtimimg機能アニメーション。
アニメーション遅延は、アニメーションの開始までの遅延を指定しました
アニメーションが果たすべき時代のアニメーションの繰り返しカウント指定された数
アニメーション方向の規定は、アニメーション逆再生をオンにする必要があるかどうか

注長いアニメーション-durationプロパティを提供し、または必要があります0

アニメーションタイミング機能アニメーション所定の速度プロファイル

同じ速度で最初から最後までライナーアニメーション
低速へのデフォルトの速度を緩和し、スピードアップの終了前に遅く
使いやすさにアニメーション低速開始時
ローエンドの緩和アウトアニメーション
使いやすさにアウト低速開始時と終了時のアニメーション

アニメーション方向の規定は、アニメーション逆再生をオンにする必要があるかどうか

noramalデフォルト。アニメーションは通常の果たすべき
逆転べき代替アニメーション

http://js.jirengu.com/hupecativa/2/edit

トランジション過度のプロパティ

デフォルトではすべて0やす0

トランジションエフェクト名なしのCSSプロパティを設定した属性名のリストCSSの遷移財産条項は効果がありませんすべてのプロパティを介して、全ての得られたプロパティ定義の効果は、トランジション効果を適用
所定時間またはそれが過度の時間を要する秒数のミリ秒単位の遷移期間の効果を必要
遷移タイミング機能の影響所定の速度速度プロファイル
上に定義された遷移遅延効果が開始されると

遷移タイミング機能高速スイッチング効果

立方ベジェ（N、N、N、N）自身の定義された関数値

https://jsbin.com/fejofoqeca/edit?html,output

JSのアニメーション

知識ポイント

1.相対位置ずれ

一度自分の位置の相対的なページを変更し続け、モバイル用のページ内の要素には、アニメーションを表示することができます

オフセット

positionプロパティの設定要素
上、左オフセット性を提供することができます
offsetLeft、offsetTopオフセット性を提供することができます

差2.obj.offsetwidthとobj.style.width

obj.offsetwidth属性は読み取り専用で、コピーすることができない、結果は純粋にデジタルであります
OBJ、属性が存在する例スタイル要素タグのインラインスタイルと幅を使用してoffsetwidth前提。読み取り可能なアサイナブル

3.requestAnimationFrame（推奨）

コールバック関数を受け入れるwindow.requestAnimationFrame（コールバック）。もっと堪能

1 <！DOCTYPE HTML>
 2 <HTMLのlang = "EN">
 3 <ヘッド>
 4      <メタのcharset = "UTF-8">
 5      <メタ名= "ビューポート"コンテンツ= "幅=デバイス幅、初期スケール= 1.0" >
 6      <タイトル>ドキュメント</タイトル>
 7 </ HEAD>
 8 <スタイル>
 9    #ball {
 10      位置：絶対。
図11は、      左：0 。
12      幅：30px;
13      高さ：30px;
14      背景：赤。
15      境界半径：50％ 。
 <BODY>
 19。      <DIV ID = "ボール"> </ div>
 20である </ BODY>
 21である    <SCRIPT>
 22である     VAR offsetX = 300; // 移動距離
23がある VAR moveOffset = 0; // これは距離移動した
24  のvar STEP = 5; // の各移動距離
25  
26である 関数移動（）{
 27      IF（moveOffset < offsetX）{
 28        にconsole.log（ball.style.left）
 29          ball.style.left =のparseInt（getComputedStyle（ボール）。左）+ STEP + 'PX'
 30          moveOffset + = STEP
 31であります         requestAnimationFrameの（移動、5 ）
 32      }
 33  }
 34  の移動（）
 35    </スクリプト>
 36 </ HTML>

setTimeoutを使用し、実施（推奨されません）とオフ

1 <！DOCTYPE HTML>
 2 <HTMLのlang = "EN">
 3 <ヘッド>
 4      <メタのcharset = "UTF-8">
 5      <メタ名= "ビューポート"コンテンツ= "幅=デバイス幅、初期スケール= 1.0" >
 6      <タイトル>ドキュメント</タイトル>
 7 </ HEAD>
 8 <スタイル>
 9    #ball {
 10      位置：絶対。
図11は、      左：0 。
12      幅：30px;
13      高さ：30px;
14      背景：赤。
15      境界半径：50％ 。
 <BODY>
 19。      <DIV ID = "ボール"> </ div>
 20である </ BODY>
 21である    <SCRIPT>
 22である VAR offsetX = 300; // 移動距離
23がある VAR moveOffset = 0; // これは距離移動した
24  のvar STEP = 5; // の各移動距離
25  
26である 関数移動（）{
 27      IF（moveOffset < offsetX）{
 28        にconsole.log（ball.style.left）
 29          ball.style.left =のparseInt（getComputedStyle（ボール）。左）+ STEP + 'PX'
 30          moveOffset + = STEP
 31であります         setTimeout（移動、5 ）
 32      }
 33  }
 34  の移動（）
 35    </スクリプト>
 36 </ HTML>

CSS3アニメーションとアニメーションJS

おすすめ