Jak přidat animaci na SVG s CSS

Sep 16, 2025
jak
Image: Web Designer
[Image: Web Designer]

Pokud jde o animaci se SVGS, jeden hlavní odbočka může být myšlenka dostat se zapadat do JavaScript knihoven. To však nemusí být případ. CSS zvládne výběr jednotlivých cest v rámci SVG vytvořit efekty. Jen vědět, že základy mohou znamenat, že je možné obrátit ploché, klišé ikony do něčeho trochu působivější. Takže možná je čas běžet základním krokem optimalizace a animace SVG. Při integrovaném do různých provedení, to trvá dlouho, než si uvědomuje, že možnosti jsou nekonečné.

Pro více než inspiraci pohybu se podívejte na Creative BloQ průvodce Příklady animace CSS a jak je kódovat.

Uložit £ 100 s super brzy ptačí jízdenku Generovat CSS. Jednodenní webová konference hostovaná Creative BloQ, Web Designer Magazine a Čistý časopis. Kniha zde .

01. Vytvořte a uložte

Nejprve vytvořte SVG pracovat. Pro tento tutoriál budeme používat jednoduchý grafický grafický v Illustratoru. Při použití aplikace Ilustrátor exportujte SVG SVG Snižte velikost kresby, aby se vešly do grafiky, klepněte na tlačítko "Uložit jako". Zvolte SVG z rozevíracího menu 'Uložit jako typ', pak 'SVG Code ...' na dialogu Možnosti SVG.

02. Optimalizace pro web

SVG screenshot

Klikněte na ikonu v pravém horním zvětšení obrázek [Obrázek: SVGOMG]

Vyříznutí zbytečných tagů usnadní řešení obrazu. To lze provést ručně kopírováním kódu do oblíbeného editoru a odstranění prázdných značek a metadat. Alternativně nazývá fantastický zdroj Svgomg. provede to automaticky. Vložte kód do pole "Paste Markup" na rozhraní SVGOMG a poté obrázek znovu zkopírujte pomocí tlačítka vpravo dole.

03. Nastavte dokument HTML

Otevřete svůj kód volby kódu a nastavte prázdný dokument HTML. Budeme zapisovat animaci CSS v souboru Main.css. Tak to taky vytvořte. Abychom se věci zaměřili na animaci, stáhli jsme v CSS verzi Bootstrap 4.1.3.

04. Sestavte rozložení

Pojďme vybudovat kosti našich dispozic a vytvořit prostor pro naše SVG. Přidali jsme záhlaví a dva sloupce: jeden vlevo pro nějaký text a jeden vpravo, který bude držet SVG, že budeme animovat. Chcete-li stránku založit, použijte sekundu, statické, SVG jako pozadí na tagu těla.

05. Umístěte SVG

Používáme naši animaci, abychom zavedli v horní části stránky zajímavější. Vložte optimalizovaný kód SVG do druhého sloupce na stránce. Pokud používáte Bootstrap, dejte SVG třídu img-tekutá aby se ujistil, že měřítko na mobilních telefonech.

06. Přidat třídy do SVG

Přidání tříd na SVG umožňuje CSS vybrat jednotlivé tvary v obraze. To znamená, že můžete animovat různé tvary obrazu v různých časech, vytváření složitějšího účinku. 

 & lt; svg & gt;
& lt; g & gt;
& lt; ráde class = "rectbackground" width = "147.4107"
výška = "68.7917" x = "31.2946" y = "114.1042"
rx = "4.5882" ry = "3.9565" výplň = "# 2A7fff" / & gt;
& lt; Cestovní třída = "RectText" D = "..." Vector-effect = "Non-scaling-tahu" width = ". 470476156" Font-Size = "12" Fill = "# FFF"
Výplňová pravidla = "Simodd" zdvih = "# FFF" zdvih-linecap = "kolo" / & gt;
& lt; / g & gt;
& lt; / svg & gt;

07. Počáteční stavy

Výběr našich prvků SVG v CSS je stejný jako jakýkoliv jiný prvek. Naše třídy používáme k výběru těchto prvků v SVG. Obě části našeho SVG začínají jako skryté, když se stránka zatíží, takže pojďme používat CSS pro nastavení obou prvků 0. . 

 Path.rectText {
krytí: 0;
}
rekt.rectbackground {
krytí: 0;
}

08. Deklarovat animace

Musíme deklarovat jméno a klíčové snímky pro každou animaci, aby CSS ví, co chceme dělat, když ho požádáme, aby provedl účinek. Vybral jsem TextDraw. a Rectfade. , jak popisují každou animaci. Rectfade. bude jednoduchá dvoufázová animace. TextDraw. bude mít extra střední krok. 

 @KeyFrames TextRaw {
0% {}
50% {}
100%{}
}
@KeyFrames Rectfade {
z{}
na{}
}

09. Přiřadit animaci a vlastnosti

SVG and coding

Klikněte na ikonu v pravém horním zvětšení obrázek [Image: Joseph Ford]

Přidáme Rectfade. animace na rectbackground prvek a dejte to trvání jedné sekundy. AN. usnadnit Kubický Bezier je používán k tomu, aby mu dal hladký pocit. Přidali jsme vpřed Takže prvek udržuje vlastnosti posledního klíčového snímku, když animace končí. 

 Rect.RectBackground {
krytí: 0;
Animace: Rectfade 1S Cubic-Bezier (0,645,
0,045, 0,355, 1) dopředu;
}

10. Animace obdélníku

SVG image

Klikněte na ikonu v pravém horním zvětšení obrázek [Image: Joseph Ford]

S pouhými dvěma klíčovými snímky, vše, co musíme udělat pro náš obdélník, je nastavit start a dokončovací sadu atributů. Začněme 1% Šířka a dokončení 100% "rozšiřování na správný efekt". Můžeme také nastavit Opacita: 1. na poslední klíčový snímek, takže tvar mizí současně. 

 @KeyFrames Rectfade {
z {
šířka: 1%;
}
na {
šířka: 100%;
Opacita: 1;
}
}

11. Textová animace

Budeme vytvářet efekt line-kreslit na náš text, pak použijte výplň do funkce Fade In. Chcete-li nastavit text animaci, kterou vám dáme naše TextDraw. se čtyřmi sekundárním trváním. Kubický Bezier byl v tomto kroku upraven tak, aby mu bylo mírně odlišné tempo pohybu. 

 Path.rectText {
krytí: 0;
Animace: TextDraw 4S
Cubic-Bezier (.56, -0.04, .32, 0,7) dopředu;
}

12. Zpoždění start

Náš text je třeba spustit stejně jako obdélník dokončil vyblednutí. Protože obdélník má jednu sekundu trvání, zpožďte začátek textové animace do té doby. 

 Path.rectText {
krytí: 0;
Animace: TextDraw 4S
Cubic-Bezier (.56, -0.04, .32, 0,7) dopředu;
Zpoždění animace: 1s;
}

13. Emulovat čára

SVG animation

Klikněte na ikonu v pravém horním zvětšení obrázek [Image: Joseph Ford]

Chcete-li získat náš efekt kreslení linky, použijeme mrtvice-dasharray. a tahu-dashoffe. parametry. Vaše hodnoty budou jiné odlišné, v závislosti na SVG používáte. Chcete-li najít svou hodnotu, použijte své preferované nástroje pro vývojáře a zvýšení mrtvice-dasharray. z 0. dokud nebude celý tvar pokrytý jedním zdvihem. 

 Path.rectText {
krytí: 0;
tahu-daskary: 735;
Animace: TextDraw 4S
Cubic-Bezier (.56, -0.04, .32, 0,7) dopředu;
Zpoždění animace: 1s;
}

14. První řádek klíčový snímek

Nyní máme naši velmi velkou mrtvici, která pokrývá celou cestu textu, vyhodnotíme ji svou vlastní délkou, aby ho efektivně zatlačila. Použitím tahu-dashoffe. Pro stejnou hodnotu jako náš dasharray. by to měl udělat. Pojďme to nastavit v našem prvním klíčovém snímku. Budeme také udělat tvar vyplnit transparentní a nastavit mrtvici k bílé, pokud ještě není. 

 0% {
Vyplňte: RGB (255, 255, 255, 0);
Zdvih: #fff;
tahu-dashoffset: 800;
Opacita: 1;
}

15. Nakreslete čáry

Naše střední klíčový snímek se objeví 40% prostřednictvím animace. Přinášíme tahu-dashoffe. Zpět na nulu, takže pomlčka pokrývá celou cestu. Můžeme znovu přidat transparentní výplň v této fázi, abyste se ujistili, že výplně se zobrazí pouze po dokončení výkresu. 

 40% {
zdvih-dashOffset: 0;
Naplňte: RGB (255, 255, 255, 0,0);
}

16. Vyplňte tvar

Pro poslední část animace zaplníme tvar v bílém. Jediné, co musíme udělat pro poslední klíčový snímek, zvýší hodnotu alfa barvy výplně. To vytváří fade-in účinek výplně. 

 100% {
Naplňte: RGB (255, 255, 255, 1);
zdvih-dashOffset: 0;
Opacita: 1;
}

generate conference

Tento článek byl původně publikován v časopisu Creative Web Design Web Designer. . Prodám vydání 286. nebo předplatit .

Přečtěte si více:

  • Přidejte filtry SVG s CSS
  • Jak navrhnout tvary CSS: Úvod
  • Jak kódovat inteligentní textové efekty s CSS

jak - Nejoblíbenější články

Jak nakreslit zvířata: 15 nejlepších tipů

jak Sep 16, 2025

(Image Credit: Aaron Blaise) Naučit se, jak nakreslit zvířata je nedílnou součástí ilustrace. Od scén volně ..

Master Směšovací kartáč ve Photoshopu

jak Sep 16, 2025

Digitální malířské nástroje v posledních letech vážně pokročily. Umělci mohou používat tablety produkovat uměleck�..

21 Způsoby, jak optimalizovat vaše CSS a urychlit vaše stránky

jak Sep 16, 2025

CSS musí projít relativně složitým potrubím, stejně jako HTML a JavaScript. Prohlížeč musí stáhnout soubory ze server..

Vytvořit znázorněné portréty z fotografií

jak Sep 16, 2025

Studoval jsem výtvarné umění a Malířské techniky A po dlouhou dobu byl úplně proti myšlence jít digitá..

Jak navrhnout zážitek z chatboty

jak Sep 16, 2025

Ať už rádi přiznáváme, nebo ne, interakční platformy pro zasílání zpráv přispívají k naší denní době mobilníc..

Vytvořit realistický fantasy rytíř

jak Sep 16, 2025

V této workshopu vám ukážeme, jak malovat rytíř Photoshop. , stejně jako malování s tradičními médii. ..

Top tipy pro zpřesnění ručně tažené ilustrační techniky

jak Sep 16, 2025

Dělal jsem tužka umění Od mého dětství, když bych se mnou nést tužku a papír. Zbarvení a malování js..

Jak nakreslit Harley Quinn

jak Sep 16, 2025

Ke mně, odvolání digitálního Malířské techniky jsou jednoduché. Na rozdíl od tradičních médií mohu v..

Kategorie