30あなたのインスピレーションのための素晴らしいSVGアニメーション

デザイナーは、CSSを使用してHTML要素にアニメーションを作成するのに使用していました。ただし、パターン、図形などを作成する際のHTML要素の制限のために、それらは自然にSVGに頼ります。.

SVGと連携して、私たちはSVGアニメーションのための優れたブラウザサポートを楽しんでいます、そして我々は新しいアニメーションを作成するより多くの方法があります。組み込みのSVGアニメーション機能とCSS3アニメーションの両方を使用できます（CSSですべてを実行できるわけではないので、JavaScriptがまだ必要です）。もう1つの方法は、GSAPやSnapなどのJavaScriptエンジンを使用することです。 JSはアニメーションを作成するための良い習慣です.

ここで私はいくつかの素晴らしいアニメSVGをまとめました。 SVGアニメーションを使う人もいれば、基本的なアニメーションにCSS変換を使う人もいれば、JavaScriptの助けを借りる人もいます。.

Sean McCafferyによるボーダーアニメーション

CSSだけで作られている場合は、テキストの上にマウスを移動すると、テキストの周囲に境界線がスムーズに形成されます。 “HOVER” 命令.

Nikolay TalanovによるElastic SVGサイドバー

サイドバーを横から引き離そうとすると、サイドバーが弾力的になります。 Material Designにヒントを得たアプリケーションサイドバーに適用された素晴らしいコンセプト.

Nikolay Talanovによって更新するためにプルダウン

ほとんどのページでは “引き下げる” ページ上で更新します。このアニメーションでは、 “解放する” ページ上では、送信アイコンが平面アイコンに変わり、空中に放たれます。.

パトリックヤングによるテキストのアニメーショングラデーション

これは、タイポグラフィを愛する人が気に入る、微妙ではあるが移動するテキストグラデーションを見逃すのは簡単ではない.

ニコライ・タラノフによる心臓アニメーション

このアニメーションは、ハートのアイコンが2つの円と1つの正方形から作成されている様子を示しています。変換はCSSアニメーションで行われます.

jjperezaguinagaで旅しよう

世界の都市や人気の観光地を説明するアニメーション。動きと変形はCSSアニメーションを使用して作成されます.

Tamino Martiniusによるメニュー切り替えアニメーション

ハンバーガーアイコンが十字アイコンに変身するモーフィングアニメーション。 2つのオブジェクト間の遷移がスムーズであることを確認する.

Sdrasによるアニメーションインフォグラフィック

GSAPタイムラインを搭載したSarah Drasnerによる素晴らしいアニメーション。それはアニメーションで作られた、活気に満ちたインフォグラフィックです。スライダーを使って任意の場所からフレームにアクセスする.

Rain-BrosはcihadturhanによるJSが好きではありません

キャラクターの歩き方を描いたユニークで面白いループアニメーション。このデモのオブジェクトの動きは、SVGとCSS3のアニメーションの組み合わせです。足はSVGアニメーションを使用し、他の部分はCSS3アニメーションを使用します。.

Mohamad Mohebifarによるクロック

現在の時刻を示すこの時計の秒針の滑らかな動きを見てください。アニメーションは、SVGアニメーション機能を使用して完全に作成されています.

レインボーロケットマンバイクリスガンノン

宇宙飛行士が虹で動くジェットパック（？）を使って宇宙に向かって射撃しています。 GSAP Tweenmaxプラグインを使って作った素敵なアニメーション.

アニメーションアイコンLuigi De Rosa

しかし、これらのアニメーションSVGアイコンの上にそれらができることをチェックしてください。作成者はGSAPを使ってこれを作りました.

HoàngNhậtによるフラットワークスペース

アニメーションはフラットスタイルデザインのワークスペースを示しています。作成者は、GSAPを使用してワークステーションのこの素晴らしいアニメーションを作成しました。.

Hamish Williamsによるクリック可能なアニメーションアイコン

これはsnap.svgライブラリを利用したクールなアニメーションです。クリックしてメールを見る “送られた”.

クリス・ギャノンによるダイビング

あなたは湖の表面に石をスキップしたことがありますか？これはそれを説明する単純なSVGパスアニメーションですが、石も湖もありません.

LegoMushroomによるWebの動き

それはアニメーション、素晴らしい曲、テキストのための超クールな入り口を持っています、好きではないものは何ですか？これは、モーショングラフィックJavaScriptライブラリであるmo.jsを使って構築されています。.

Lee Porterによるアニメーションライティングフォント

SVGを使用して図形をスケッチするパスアニメーションを作成するだけでなく、この作成者が作成したもののようなタイポグラフィにも使用できます。ぼかし効果はそれをより素晴らしいものにします.

ルーカスベバーによるグーイメニュー

SVGフィルターを使用してCSSアニメーションを追加することで作成されたこのデザインのグーイー効果を楽しんでください。結果は現実的で本当にクールです、そしてあなたは4つの異なるバージョンで遊ぶことができます.

MarcoBarríaのニューケーキ

SVGとCSSアニメーションで作られたレイヤードバースデーケーキの作り方.

Rachel Smithによってありがとう

簡単なお礼状のこの素晴らしいアニメーションを見てください。 SVGとGSAP TweenMaxライブラリを使用して作成されています。.

Mario Sanchez MaselliによるCSS vs SVG

それでは、CSSとSVGのアニメーションの比較を見てみましょう。違いがわかりますか。?

ウォーキングドッグbyマークネルソン

SVGをアニメートするもう1つの方法は、この作成者が行ったようにスプライト画像を使用することです。.

Leelaの砂時計ローダー

純粋なSVGアニメーション（SMIL）を使って作られた創造的な作品。ここで物事をアニメートするためのCSSやJSはありません.

Adem ilterによるロゴアニメーション

これはインラインSVGアニメーションを使った素敵なアニメーションロゴイントロです。 CSSやJSを使用してすべてが機能するわけではありません.

Jonas Badalicによる統計アニメーション

Snap.SVGライブラリを使用したSVGアニメーション付きの美しい統計グラフ.

ノエルデルガドのオーロボロス

素晴らしいSVGアニメーションパス最初に作成者がSVG上にパスルートを描き、その後tween.jsを使ってアニメーションを追加しました.

Lucas Bebberによるクリエイティブグーイエフェクト

これは、SVGフィルタを7つの独創的に使用して、ゴーイっぽい効果を出すためのものです。音楽ビジュアライザーは私のお気に入りです、アニメーションはとても素敵に見えます.

サラDrasnerによって牛を投げる

これは、TweenMaxを使用したSVGアニメーションですが、ただのために作られています。惑星の周りに牛を抱えてドラッグします。それは「軌道」で回転します.

アリによるアニメーションロゴ

バブリングビールのロゴには、アニメーションを追加するのもいいかもしれません。素敵な小さな浮遊泡は純粋にSVGのネイティブアニメーションシンタックスで構築されています.