Een animatie toevoegen aan SVG met CSS

Sep 16, 2025
Procedures
Image: Web Designer
[Afbeelding: Web Designer]

Als het gaat om het animeren met SVGS, kan één grote uitschakeling het idee zijn om in JavaScript-bibliotheken te worden verzand. Dit hoeft echter niet het geval te zijn. CSS kan omgaan met het selecteren van individuele paden binnen een SVG om effecten te creëren. Gewoon het kennen van de basis kan betekenen dat het mogelijk is om platte, cliched-pictogrammen in iets een beetje indrukwekkender te maken. Dus misschien is het tijd om door de fundamentele stappen van SVG-optimalisatie en -animatie te lopen. Wanneer geïntegreerd in verschillende ontwerpen, duurt het niet lang om te beseffen dat de mogelijkheden eindeloos zijn.

Neem voor meer beweginginspiratie een kijkje op de gids van Creative Bloq voor CSS-animatievoorbeelden en hoe ze ze coderen.

Bespaar £ 100 met een super vroeg vogelticket naar Genereer CSS , de eendaagse webconferentie die wordt gehost door Creative Bloq, Web Designer Magazine en Net Magazine. Boek hier ​

01. Maak en opslaan

Maak eerst een SVG om mee te werken. Voor deze zelfstudie zullen we een eenvoudige afbeelding in Illustrator gebruiken. Bij gebruik van illustrator om een ​​SVG te exporteren, vermindert u de grootte van het artboard om in de afbeelding te passen en klik vervolgens op 'Opslaan als'. Selecteer SVG in het vervolgkeuzemenu 'SAF AS TYPE', vervolgens 'SVG-code ...' op de SVG-opties Dialoog.

02. Optimaliseren voor het web

SVG screenshot

Klik op het pictogram in de rechterbovenhoek om de afbeelding te vergroten [Afbeelding: SVGOMG]

Het uitsnijden van onnodige tags maakt het beeld gemakkelijker om mee om te gaan. Dit kan handmatig worden gedaan door de code naar uw favoriete editor te kopiëren en lege tags en metadata te verwijderen. Als alternatief heeft een fantastische hulpbron genoemd Svgomg zal dit automatisch doen. Plak de code in het gebied 'Pasta Markup' op de SVGOMG-interface en kopieer vervolgens de afbeelding opnieuw met de knop rechtsonder.

03. Stel een HTML-document in

Open uw code-editor van keuze en stel een leeg HTML-document in. We zullen de CSS-animatie in een bestand schrijven main.css , dus maak dit ook. Om dingen op de animatie gericht te houden, hebben we ingeschakeld in de CSS-Only-versie van Bootstrap 4.1.3.

04. Bouw de lay-out

Laten we de botten van onze lay-out bouwen en een ruimte maken voor onze SVG. We hebben een koptekst en twee kolommen toegevoegd: één aan de linkerkant voor wat tekst, en één aan de rechterkant, die de SVG vasthoudt die we zullen animeren. Om de pagina omhoog te leven, gebruikt u een tweede, statisch, SVG als een achtergrond op het lichaamstag.

05. Plaats de SVG

We gebruiken onze animatie om de introductie bovenaan de pagina interessanter te maken. Plak de geoptimaliseerde SVG-code in de tweede kolom op de pagina. Als u Bootstrap gebruikt, geef dan de SVG de klasse img-vloeistof om ervoor te zorgen dat het op mobiele telefoons schaalt.

06. Voeg klassen toe aan de SVG

Klassen toevoegen aan de SVG Maakt CSS toe om de afzonderlijke vormen in de afbeelding te selecteren. Dit betekent dat u op verschillende tijden verschillende vormen van het beeld kunt animeren, waardoor een complexer effect wordt gemaakt. 

 & LT; SVG & GT;
& LT; G & GT;
& LT; RECT-klasse = "Rectbackbackground" breedte = "147.4107"
Hoogte = "68.7917" x = "31.2946" Y = "114.1042"
rx = "4.5882" ry = "3.9565" Fill = "# 2A7FFF" / GT;
& LT; PATH CLASS = "RECHTSTEXT" D = "..." Vector-effect = "Non-scaling-takt" slagbreedte = ". 470476156" Font-size = "12" Fill = "# FFF"
Fill-Rule = "Evenodd" Stroke = "# FFF" Stroke-LineCap = "ROND" / GT;
& LT; / G & GT;
& LT; / SVG & GT;

07. Initial staten

Het selecteren van onze SVG-elementen in CSS is hetzelfde als elk ander element. We gebruiken onze klassen om die elementen binnen de SVG te selecteren. Beide delen van onze SVG starten als verborgen wanneer de pagina laadt, dus laten we CSS gebruiken om de dekking van beide elementen in te stellen 0 ​ 

 Path.Recttext {
Dekking: 0;
​
rect.Rectbackground {
Dekking: 0;
}

08. Verklaar de animaties

We moeten de naam en keyframes voor elke animatie declareren, zodat CSS weet wat we willen doen wanneer we het vragen om een ​​effect uit te voeren. ik heb gekozen Textdraw en reïctie , terwijl ze elke animatie beschrijven. reïctie zal een eenvoudige tweestaps animatie zijn. Textdraw zal een extra middenstap hebben. 

 @KeyFRAMES TEXTDRAW {
0% {}
50% {}
100% {}
​
@KeyFRAMES RECHTFADE {
van{}
naar{}
}

09. Animatie en eigenschappen toewijzen

SVG and coding

Klik op het pictogram in de rechterbovenhoek om de afbeelding te vergroten [Afbeelding: JOSEPH FORD]

We voegen de reïctie Animatie aan de reillebackground element en geef het een duur van een seconde. Een mesout Cubic Bezier wordt gebruikt om het een soepeler gevoel te geven. We voegen toe vooruit Dus het element houdt de eigenschappen van het laatste keyframe wanneer de animatie eindigt. 

 rect.Rectbackground {
Dekking: 0;
Animatie: Rectfade 1S CUBIC-BEZIER (0.645,
0,045, 0,355, 1) naar voren;
}

10. De rechthoekanimatie

SVG image

Klik op het pictogram in de rechterbovenhoek om de afbeelding te vergroten [Afbeelding: JOSEPH FORD]

Met slechts twee keyframes, alles wat we voor onze rechthoek moeten doen, is een start- en afwerking van attributen ingesteld. Laten we beginnen met een 1% Breedte en afwerking 100% om een ​​'uitbreiden naar het juiste effect' te geven. We kunnen ook instellen Dekking: 1 naar het laatste keyframe, dus de vorm vervaagt tegelijkertijd in. 

 @KeyFRAMES RECHTFADE {
van {
Breedte: 1%;
​
naar {
Breedte: 100%;
Dekking: 1;
​
}

11. De tekstanimatie

We gaan een line-draw-effect maken op onze tekst en vervolgens een vulling gebruiken om in te vagen. Om de tekstanimatie in te stellen, geven we het onze Textdraw met een vier seconden duur. De Cubic Bezier is gewijzigd op deze stap om het een enigszins ander tempo van beweging te geven. 

 Path.Recttext {
Dekking: 0;
Animatie: Textdraw 4S
Cubic-Bezier (.56, -0.04, .32, 7) naar voren;
}

12. Vertraging van de start

Onze tekst moet worden uitgevoerd zoals de rechthoek is voltooid. Omdat de rechthoek een duur heeft, vertraging de start van de tekstanimatie tegen die tijd. 

 Path.Recttext {
Dekking: 0;
Animatie: Textdraw 4S
Cubic-Bezier (.56, -0.04, .32, 7) naar voren;
Animatie-vertraging: 1s;
}

13. Emuleren lijntekening

SVG animation

Klik op het pictogram in de rechterbovenhoek om de afbeelding te vergroten [Afbeelding: JOSEPH FORD]

Om ons lijntekening-effect te krijgen, zullen we de streek-dasharray en slag-dashoffset parameters. Uw waarden zullen anders zijn voor de mijne, afhankelijk van de SVG die u gebruikt. Gebruik uw gewenste ontwikkelaarstools en verhoging van uw waarde om uw waarde te vinden streek-dasharray van 0 totdat de hele vorm onder één slag is bedekt. 

 Path.Recttext {
Dekking: 0;
slag-dasharray: 735;
Animatie: Textdraw 4S
Cubic-Bezier (.56, -0.04, .32, 7) naar voren;
Animatie-vertraging: 1s;
}

14. First Line Tekening Keyframe

Nu hebben we onze een zeer grote slag die het volledige tekstpad bedekt, laten we het door zijn eigen lengte compenseren om het effectief weg te duwen. Gebruik makend van slag-dashoffset Voor dezelfde waarde als onze dashray zou het moeten doen. Laten we dit in ons eerste keyframe instellen. We laten ook de vorm transparant vullen en de slag instellen op wit als het nog niet is. 

 0% {
Vul: RGB (255, 255, 255, 0);
beroerte: #fff;
slag-dashoffset: 800;
Dekking: 1;
}

15. Teken de lijnen

Ons middelste keyframe verschijnt 40% door de animatie. We brengen de slag-dashoffset Terug naar nul zodat het dashboard het hele pad bedekt. We kunnen de transparante vulling in deze fase opnieuw toevoegen om ervoor te zorgen dat de vulling alleen verschijnt zodra de tekening is voltooid. 

 40% {
slag-dashoffset: 0;
Vul: RGB (255, 255, 255, 0.0);
}

16. Vul de vorm in

Voor het laatste deel van de animatie vullen we de vorm in het wit. Alles wat we nodig hebben voor het laatste keyframe is de alfa-waarde van de vulkleur verhogen. Dit creëert het fade-in-effect van de vulling. 

 100% {
Vul: RGB (255, 255, 255, 1);
slag-dashoffset: 0;
Dekking: 1;
}

generate conference

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine Webdesigner ​ Koop Issue 286 of inschrijven ​

Lees verder:

  • Voeg SVG-filters toe met CSS
  • Hoe te ontwerpen met CSS-vormen: een introductie
  • Hoe de slimme tekst-effecten met CSS codet

Procedures - Meest populaire artikelen

Maak geanimeerde CSS-kunst

Procedures Sep 16, 2025

(Beeldkrediet: Tiffany Choong) CSS-afbeeldingen maken is een leuke manier om je vaardigheden te oefenen en een nette ..

Photoshop Kleurverandering: 2 Gereedschap die u moet kennen

Procedures Sep 16, 2025

SPRING NAAR: De kleurvervangingstool Het opdracht Kleurbereik ..

30 Keyshot-rendering Tips

Procedures Sep 16, 2025

Het weergeven van een afbeelding, animatie van een model of zelfs een hele scène is een belangrijke stap in de kunstcreatie. Zon..

Een bord voorbereiden op het schilderen in 3 eenvoudige stappen

Procedures Sep 16, 2025

Ik ga het snelste delen Schilderstechniek Ik gebruik voor 'Gessoing' een paneel en het krijgen van een soepele afw..

Gloeiende kleuren maken met olieverfschilderingen

Procedures Sep 16, 2025

Wordt gevraagd om mijn te beschrijven Schilderstechniek is vreemd voor mij, en eerlijk gezegd is het moeilijk om t..

Hoe een zombie in Clip Studio-verf te schilderen

Procedures Sep 16, 2025

In deze tekening tutorial leer je Hoe te tekenen en te schilderen een zombie met behulp van Clip studio ve..

Verf een portret zoals Van Gogh

Procedures Sep 16, 2025

Nederlandse post-impressionistische schilder Vincent van Gogh (1853-1890) creëerde veel zelfportretten in zijn carrière - hoewe..

Hoe beweging in uw 3D-renders vast te leggen

Procedures Sep 16, 2025

Als freelance kunstenaar werk ik aan een verscheidenheid aan kleine projecten, waarvan de meeste het creëren en textureren ..

Categorieën