CSS 3新規アニメーション特性@keyframes

5620 ワード
CSS css 3 先端
アニメーションの定義
keyframesでアニメーションを定義する(クラスセレクタの定義と同様)
アニメーションシーケンス
  • 0%がアニメーションの始まりで、100%がアニメーションの完成です.このようなルールはアニメーションシーケンスです.
  • @keyframesでCSSスタイルを指定すると、現在のスタイルから徐々に新しいスタイルに変化するアニメーション効果を作成できます.
  • fromとtoは0%と100%に等しい.
    • @keyframes      {
     
	0% {
     
		transform: translateX(0px);
	}
	100% {
     
		transform: translateX(1000px);
	}
}

    複数の状態を書くこともできます.0%から100%までです.中のパーセンテージは総時間の区分で、整数でなければなりません.たとえば、次のようにします.
    @keyframes      {
     
	0% {
     
		transform: translate(0px,0px);
	}
	25% {
     
		transform: translate(1000px,0px);
	}
	50% {
     
		transform: translate(1000px,500px);
	}
	75% {
     
		transform: translate(0px,500px);
	}
	100% {
     
		transform: translate(0px,0px);
	}
}

    アニメーションの呼び出し
    CSSでアニメーションを使用する要素に書き込みます.
    /*      */
animation-name:     ;
/*      */
animation-duration:   （  ：s）;

    アニメーションの一般的なプロパティ
    ツールバーの
    説明
    デフォルト
    @keyframes
    規定アニメーション
    -
    animiation
    アニメーション-play-state属性を除くすべてのアニメーションの略語属性
    -
    animiation-name
    @keyframesアニメーションの名前を指定
    -
    animiation-duration
    アニメーションの1サイクルを指定するのにかかる秒またはミリ秒
    0
    animiation-timing-function
    アニメーションの速度曲線を指定
    ease
    animiation-dalay
    アニメーションの開始時間を指定
    0
    animiation-iteration-count
    アニメーションの再生回数を指定(infiniteはループ)
    1
    animiation-direction
    規定アニメーションは次のサイクルで逆再生(alternateは逆再生)
    normal
    animiation-play-state
    アニメーションの正常な動作または一時停止を指定(pausedは一時停止)
    running
    animiation-fill-mode
    アニメーション終了後の状態を指定(forwardsは保持)
    backwards(開始に戻る)
    簡潔に書く
    animation:                                         ;

    ps:順番に
    例:
    animation: move 5s linear 2s infinite alternate;

    linearは均一速度である.書かないでデフォルトで、前の2つの属性は省略できません.
    @keyframesでホットスポットマップコードリンクを実現する:https://blog.csdn.net/Web_blingbling/article/details/108514085
    HTML 5 canvasキャンバス
    プログラマが知らなければならないメモリのこと---ポインタドメイン配列の対比