CSSアニメーションのいくつかのノート

3483 ワード
アニメーション css
通常、CSSアニメーションには、transform、transition、animationの3つのタイプがあります.
彼ら3人の役割はまったく違う.
  • transform:要素の可視化モデルの変形と理解でき、この変形はスケール、回転、傾斜、平行移動などであってもよい.
  • transition:一部のCSSプロパティが変化したときにグラデーションアニメーションを実行します.たとえば、色を変更したときにグラデーションのプロセスを実行できます.
  • animation:これこそ本当の意味でのアニメーションであり、キーフレームごとにアニメーションの各フレームの効果を定義することができます.

    • 1 transform


    これは最もよく理解して、変形(トランスフォーマーはtransformerではありません)と訳すことができます.これはtransitionやanimationとは異なり、アニメーション実行のプロセスはありません.構文は次のとおりです.
    transform: [transform-function]* | none;
    複数のtransform効果をスペース形式で一度に定義できます.
    デフォルトのすべての効果は要素の中心点を原点として行われます.もちろんtranform-originでこの設定を変更することができます.
  • transform-functionは、
    • の値です.
  • rotate(angle):回転、時計回りに一定の角度を回転、例えばrotate(30 deg)
  • scale(sx,[sy]):スケーリングで、x軸とy軸のスケーリングを指定できます.yが指定されていない場合はxと同じです.もちろん、scaleXとscaleYで個別に設定できます.
  • skew(ax,[ay]):傾斜し、x軸とy軸の傾斜角度を指定し、yが指定されていない場合、y軸は傾斜しません.同様にskewXとskewYで個別に設定できます.
  • translate(tx,[ty]):平行移動、同様にxとyを指定できます.yが指定されていない場合、デフォルトは0です.同様にtranslateXとtranslateYで個別に指定できます.
  • matrix(a,b,c,d,e,f):マトリクス、ピクチャをマトリクス変換します.

    • 2 transition


    CSSプロパティが変更されるとアニメーションが実行されるので、このtransitionではCSSプロパティを変更するトリガアクションが必要です.CSSプロパティの変更は、hoverなどの擬似クラスを使用してclassを追加したり、JSを直接使用してプロパティ値を変更したりするなど、任意の方法でトリガーできます.
    では、transitionアニメーションを定義するにはどのパラメータが必要ですか.カラーなどの属性名を指定してから、アニメーション時間関数(加速度関数)を定義し、アニメーション持続時間を定義する必要があります.この3つの基本があれば十分ですが、アニメーションの遅延や繰り返し回数などを定義することができます.
    例えばtransition:color ease-in 0.5 1;色が変わるとアニメーションが実行され、時間関数は加速関数(ますます速くなる)であり、持続時間は0.5秒で、1秒遅れてアニメーションが開始されることを示します.
    明らかに、display:inlineなど、すべての属性がアニメーション化できるわけではありません.この変化は明らかにアニメーションを作ることができません.これらのアトリビュートについては、このリストを参照してください.
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
    アニメーションの時間関数は、ease、ease-in、ease-out、linearなどです.
    持続時間も遅延時間も秒単位です.
    Transitionの詳細については、次の文書を参照してください.
    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

    3 animation


    キーフレームでアニメーションを作成することで、フレームごとの効果を指定できるので、複雑なCSSアニメーション効果を実現できます.Transitionとは異なり、animationにはトリガ動作はありません.CSSスタイルがanimation定義に解析されるとアニメーションがトリガーされます.
    animationは、アニメーションの実行を定義するプロセスと、キー(keyframe)で定義するプロセスと、要素にアニメーションの使用を宣言し、アニメーションの時間などのパラメータを定義する2つの部分に分かれています.
    まず、キーフレームでアニメーション効果を定義し、名前を付ける必要があります.その後、この名前でこの効果を使用することができます.例:
    @keyframe slidein {
     from {
          margin-left: 100%;
     }
     50% {
          margin-left: 50%;
     }
     to {
          margin-left: 0;
     }
}

    slideinという名前のアニメーション効果が定義され、3フレームの具体的な効果が定義されています.各フレームはパーセントで定義されています.このパーセントはアニメーション時間のパーセントです.このうちfromとtoは0%と100%の略語と考えることができます.
    もちろん、より多くのフレームを定義することができます.たとえば、次のように減速の効果があります.
    @keyframe slidein {
     from {
          margin-left: 100%;
     }
     20% {
           margin-left: 50%;
     }
     50% {
          margin-left: 80%;
     }
     to {
          margin-left: 0;
     }
}

    時間20%でmarginが50%移動したので、このアニメーションはゆっくり減速する効果があるように見えます.
    アニメーション効果を定義した後、CSSでanimationプロパティを使用してこの効果を使用することができます.上記の定義はパーセンテージなので、使用するときはアニメーションの持続時間を設定する必要があります.例:
    .my-slidein {
         animation-name: slidein;
         animation-duration: 1;
    }
    要素にmy-slidein classを追加すると、すぐにスライドするアニメーションを指定します.
    アニメーションの実行が完了すると、定義したすべてのプロパティの変更がリセットされます.つまりanimationは最終的なスタイルに影響しません.
    animationの詳細については、ここを参照してください.
    https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_animations
    常用細線表のCSS実現
    NVelocity for ASP.NET MVC