フロントエンド開発ではしばしば遷移アニメーションが必要であり,SVGをバックグラウンドアニメーションとして実現できる.
テキストリンク

animate

svgのanimate要素はアニメーション効果を実現するために使用できます

attributeName

変更された要素属性名の定義

attributeType

attributeType="XML"の場合、attributeNameはXMLの属性とみなされます.attributeType="CSS"の場合、attributeNameはcssの属性とみなされます.attributeTypeを指定しない場合、デフォルトは「auto」で、cssの属性としてattributeNameを使用し、無効な場合はXMLの属性としてattributeNameを使用します.

from、to、by

fromとtoは、それぞれ変化する属性の初期値と終了値を定義します.fromはデフォルトで、初期値がanimate親要素に対応する属性値であることを示します.変化オフセット量を表すtoをbyで置き換えることができます.to=from+byと理解できます.

begin、dur、end

beginアニメーションの開始時間を定義します.durアニメーションに要する時間を定義します.endアニメーション終了時間を定義します.時間単位h:時間;min:分;s:秒;ms:ミリ秒.デフォルトの時間単位:s

fill

fill=「freeze」の場合、アニメーションが終了すると、変化する要素属性値はアニメーションが終了した状態にとどまる.fill=removeの場合、アニメーションが終了すると、変化した要素属性値がアニメーションの開始時の状態に戻ります.fillプロパティのデフォルト値は:removeです.

上記のコードは、緑色の正方形が徐々に長くなるアニメーションを実現します.

animateTransform

transformプロパティの変更をアニメートし、animateTransform要素の代わりにanimateTransformを使用します.animateTransformのattributeNameはtransformとして指定され、translate、scale、rotate、skewX、skewYなど、type属性で変更する属性を指定します.
animateTransformにはadditiveプロパティがあります.デフォルトではadditiveプロパティ値はreplaceで、現在のanimateTransformの初期状態が以前のanimateTransformの変化結果とは無関係であることを示します.additive=「sum」の場合、現在のanimateTransformの変化が以前のanimateTransformの変化に基づいていることを示します.

animateMotion

animateMotionは、cssアニメーションのプロパティだけでは実現できない効果を実現します.animateMotionでは、親要素を指定したパスに沿って移動できます.たとえば、次のようになります.

animateMotionにはrotateプロパティがあります.デフォルトは0で、要素はモーション中に回転しません.autoに設定すると、要素に対応する水平軸はpathパスと常に水平に保たれます.

loading効果

background-imageプロパティを使用してsvgアニメーションをloading状態として表示します.urlに注意した後、データの説明を追加する必要があります.data:image/svg+xml、
共通css

.loading {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
}

html

css

.loading-audio {
    background-image: url('data:image/svg+xml,')
}

.loading-ball-triangle {
    background-image: url('data:image/svg+xml,');
}

.loading-bars {
    background-image: url('data:image/svg+xml,');
}

.loading-circles {
    background-image: url('data:image/svg+xml,');
}

.loading-grid {
    background-image: url('data:image/svg+xml,');
}

.loading-oval {
    background-image: url('data:image/svg+xml,');
}

.loading-puff {
    background-image: url('data:image/svg+xml,');
}

.loading-spinning-circles {
    background-image: url('data:image/svg+xml,');
}

.loading-tail-spin {
    background-image: url('data:image/svg+xml,');
}

.loading-three-dots{
    background-image: url('data:image/svg+xml,');
}