transition, transform

2087 ワード
CSS テキストリンク

transition



CSS属性値が変化した場合、値の変化を一定時間内に発生させる.
遷移プロパティ
  • delay 
    •     div:hover{
        background: blue;
    }
    その名の通り、遅延を与えることです.サスペンションストーブは青い箱に設計されている.このときtransition-delay: 2s;をあげ、2秒後に青い箱になります.
  • duration
    上記の例ではtransition-duration: 2s;が示されていると仮定する.今回は2秒で青いboxになり、これがdurationです.
  • property
    どの属性遷移を付与するかを決定します.
    all:すべての属性を付与
    none:一部の属性の付与を禁止する
    property:遷移効果を適用するcssプロパティを設定する
    initial:属性のデフォルトに設定
    継承:親要素の属性値
    • を継承します.
  • transition - timing - function
    これはまずMDNを見て理解が早いです.
    属性値は、ease、linear、ease-in、ease-out、ease-in-out、step-start、step-end、steps(int,start|end)、cubic-bezier(n,n,n)、initial、inheritanceです.
    • 通常、transitionはtransition : all 2s;と同様に一度に使用される.

    transfrom



    transitionとともに多くのアクションを作成できるプロパティを使用します.大きさや位置を変える役割を果たす.
    属性の変換
  • scale
    真ん中を中心にサイズを大きくします.1は100%、入力2は2倍の大きさです.hover、transitionとともに使用すると、マウスが止まると自然に画面が大きくなるのがわかります.
  • rotate
    回転可能なアトリビュートは、rotate(90deg)とともに使用されます.
  • translate
    x、y軸点のプロパティを移動し、translate(x축, y축)を使用します.データム点はscaleと同じように中央に位置します.
  • skew
    ツイストまたはベンド変形.rotateと同じようにdegで表現します.
  • transform-origin
    objectの基点を変更します.上のプロパティの説明に示すように、基点は中央になります.この基準点を変更したい場合は、transform-origin:0, 0;と一緒に使用できます.x軸は0、y軸も0という意味です.left、right、top、bottom、center文字を使用して位置を設定することもできます.
    • の最後の部分
    translateでも位置の役割を果たすことができます.しかし、無駄にやったわけではありません.静的サイト上で簡単に配置する場合はposition、アニメーションまたは要素の位置を動的に移動する場合はtranslateを使用します.
    cssによってレイアウト変更のアニメーションが実装されると、ブラウザはフレームごとにリフローと再描画を実行します.これはこのような状況を防ぐための変革である.
    最終的にパフォーマンスの問題を引き起こす
    最初のActivity:EnglishWorldsActivity
    WebViewの1回の使用ノート