na te maken goed gebruikt, CSS animatie is een ongelooflijk nuttig en krachtig hulpmiddel. Het kan interesse of creatieve opwinding toevoegen, het oog van de gebruiker richten, iets snel en bondig uitleggen en de bruikbaarheid verbeteren. Om die reden, hebben de afgelopen jaren meer en meer animatie gezien op sites en in de app.

in dit artikel, ronden we enkele van de coolste CSS animatie voorbeelden die we hebben gezien, en laten we je zien hoe je ze opnieuw kunt maken., Lees verder voor een scala aan diepgaande tutorials en inspirerende Effecten (en links naar hun code) om te verkennen.

Wat is CSS-animatie?

CSS animatie is een methode voor het animeren van bepaalde HTML-elementen zonder gebruik te maken van processor en geheugen-hongerige JavaScript of Flash. Er is geen limiet aan het aantal of de frequentie van CSS-eigenschappen die kunnen worden gewijzigd. CSS-animaties worden geïnitieerd door keyframes voor de animatie op te geven: deze keyframes bevatten de stijlen die het element zal hebben.,

hoewel het beperkt lijkt als het gaat om animatie, is CSS eigenlijk een echt krachtige tool en is in staat om prachtig vloeiende 60fps animaties te produceren. “Het leveren van doordachte, vloeiende animaties die betekenisvolle diepte bijdragen aan uw site hoeft niet moeilijk te zijn,” zegt front-end webontwikkelaar Adam Kuhn. “Moderne CSS eigenschappen nu hand u bijna alle tools die u nodig hebt om onvergetelijke ervaringen voor uw gebruikers te creëren.,”

De beste animaties hebben nog steeds hun wortels in Disney ‘ s classic 12 principles of animation – je zult meerdere vermeldingen daarvan zien in deze CSS animatie voorbeelden, dus het is de moeite waard om dat artikel te bekijken voordat je begint. Misschien wilt u ook onze roundup van grote geanimeerde Muziekvideo ‘ s verkennen voor meer voorbeelden en inspiratie.

De gouden regel is dat uw CSS – animaties niet overdreven mogen zijn-zelfs een kleine beweging kan een grote impact hebben, en te veel kan afleidend en irritant zijn voor gebruikers., Hier zijn onze favoriete voorbeelden en hoe ze opnieuw te maken.

leuk muiseffect

  • auteur: Donovan Hutchinson

Dit is een leuk effect dat uw muis volgt. Het kan handig zijn als u de aandacht wilt vestigen op een element op uw pagina.

we hebben heel weinig HTML nodig voor dit effect:

<div class="demo"> <div class="perspective-container"> <div class="card"></div> </div></div>

eerst plaatsen we de demo en stellen we perspectief in voor onze 3D-transformatie:

dan stylen we de div die we willen animeren:

Hier zetten we een achtergrond in, dan zetten we overflow op verborgen zodat we later een glans-effect kunnen toevoegen., We stellen ook CSS variabelen, sheenX en sheenY.

Deze glans variabelen helpen het glans effect te positioneren. We gebruiken ze in onze kaarten na pseudo-element:

hier zorgen we ervoor dat het pseudo-element groter is dan de container. Dit zal ons iets om rond te schuiven op de top van de kaart met behulp van transformeren.

de eigenschap transform maakt gebruik van de CSS variabelen die we eerder hebben ingesteld. We zullen deze instellen met JavaScript. Laten we het JavaScript Instellen om eerst te luisteren naar muisgebeurtenissen:

document.,onmousemove = handleMouseMove;

we hebben nu een handleMouseMove-functie nodig om onmousemove te verwerken:

onze functie neemt de vensterhoogte en-breedte en maakt een hoek op de x-en Y-assen. We zetten deze vervolgens op de transform stijl van onze kaart. Dit geeft de kaart een hoek gebaseerd op de muis!

We roepen vervolgens een functie aan om de positie van het pseudo-element in te stellen:

ons pseudo-element ziet er het beste uit als het in de tegenovergestelde richting van de muis beweegt. Om dit te bereiken creëren we een getal tussen -0,5 en 0,5 dat in de tegenovergestelde richting verandert door de verhouding met -1 te berekenen.,

we vermenigvuldigen dit getal met 800 omdat we het willen schalen tot een maximum van 400px, Wat is hoe ver we het Sheen pseudo-element buiten de kaart zetten.

ten slotte stellen we deze offset waarden in op onze CSS variabele eigenschappen, en de renderer van de browser doet de rest.

we hebben nu een kaart die naar onze muis draait terwijl het glanseffect bovenaan in de tegenovergestelde richting beweegt. Dit zorgt voor een mooi, opvallend effect.,

The big reveal

  • auteur: Adam Kuhn

geanimeerde inhoud reveal-effecten lijken op dit moment vrij populair te zijn, en als ze correct worden gebruikt, kunnen ze gebruikersfocus vastleggen en uw publiek aanspreken. Je hebt dit eerder gezien: een blok kleur groeit van de ene of de andere kant horizontaal of verticaal, en trekt zich dan terug naar de andere kant, dit keer onthullend een tekst of een afbeelding eronder. Het is een concept dat misschien lastig lijkt, maar echt afhankelijk is van slechts een paar dingen.,

eerst stellen we onze elementpositionering in (download hier de volledige code) – definieer het als relatief (alleen statisch zal in dit geval falen). In tekstgevallen is het het beste om automatische hoogte en breedte toe te staan, hoewel een beetje opvulling geen pijn doet. We zullen ook een transform origin definiëren, in het geval van het bovenliggende element willen we de startpositie gebruiken. Omdat we het element eerst Verborgen willen hebben, gebruiken we een schaaltransformatie langs de juiste as om het te verkleinen.

volgende, een pseudo-element om onze ouder te maskeren, waarbij de transform origin wordt ingesteld op de tegengestelde optie., Tenslotte, teken samen de animaties, met behulp van de timing functies of vertragingen om elk te compenseren.

Note, we hebben de animaties van het ouder-en pseudo-element gecompenseerd met een vertraging die het kader vertelt dat onze tekst verbergt om het pas te onthullen nadat het element zelf volledig in beeld is geschaald. Bekijk de Codepen hieronder.

wankelen op

  • auteur: Adam Kuhn

zodra u begonnen bent met het verzamelen van een fatsoenlijke bibliotheek van verschillende versoepeling fragmenten, is het tijd om naar andere manieren te kijken om de diepte van uw animaties te vergroten, en een van de beste manieren is om uw geanimeerde elementen te compenseren.,

Het komt maar al te vaak voor dat een JavaScript-trigger is ingesteld om een aantal animaties te starten op basis van de Scrollpositie, alleen om alle items te vinden die effectief in tandem bewegen. Gelukkig biedt CSS zelf een eenvoudige eigenschap die je geanimeerde ervaring kan maken( of breken): animation-delay.

laten we bijvoorbeeld zeggen dat we een raster van afbeeldingen hebben die we in frame willen animeren wanneer de gebruiker scrollt. Er zijn een aantal manieren waarop we dit kunnen activeren, waarschijnlijk door klassen toe te voegen aan de elementen als ze de viewport binnenkomen., Dit kan echter een behoorlijk zware lift zijn voor de browser en kan worden vermeden door simpelweg een enkele klasse toe te voegen aan een containerelement en animatievertragingen op onderliggende elementen te definiëren.

Dit is een bijzonder goede use case voor preprocessors zoals SCSS of minder, die ons in staat stellen om een @for lus te gebruiken om door elk element te herhalen.

#parent{.child{ animation: animationName 1.5s ease-in-out 1 forwards;@for $i from 1 through 20{ &:nth-of-type(#{$i}){animation-delay:#{$i/10}s; }} }}

Hier zult u zien dat met SCSS we in staat zijn om door elke :nth-of-type selector te lopen, en dan een animatie vertraging toe te passen op basis van de numerieke waarde van elk kind-element., In dit geval zul je merken dat we onze timing verdelen om elke increment te verminderen tot een fractie van een seconde. Terwijl het compenseren van uw geanimeerde elementen emotie kan lenen aan uw animatie, te veel vertraging kan het gevoel onsamenhangend. Bekijk deze CodePen hieronder.

Squigglevision

  • auteur: Adam Kuhn

SVG-filters bieden een geweldige manier om een natuurlijk, met de hand getekend gevoel te bereiken en te ontsnappen aan enkele van de vlakke weergavebeperkingen van CSS alleen. Ze animeren kan het effect verder verbeteren.

voorbeeld: Squigglevision., Ja,Dit is geen technische term die bekend is bij de meeste animators, maar je hebt het zeker gezien in Tekenfilms. Het idee is dat de randen van deze geanimeerde elementen niet alleen enigszins gekarteld en ruw-gehouwen zijn, maar deze ruwe randen snel variëren, frame voor frame, waardoor ze voelen alsof ze van de pagina ‘ s van een schetsboek zijn gescheurd en tot leven zijn gebracht.

om dit effect te bereiken, kunnen we een SVG op onze pagina opnemen met meerdere filters en kleine variaties in turbulentieniveaus voor elk. Vervolgens zetten we onze animatietijdlijn op, waarbij we elk filter oproepen in zijn eigen keyframe., Het is belangrijk om te spelen met de tijdsduur omdat we verwachten dat de animatie ‘springerig’ zal voelen, maar niet zo langzaam dat het onsamenhangend of zo snel voelt dat het gek wordt.

daarom is het belangrijk op te merken dat CSS niet de mogelijkheid heeft om soepel te wisselen tussen SVG-filters, omdat er geen manier is om toegang te krijgen tot eigenschappen zoals turbulentie en schaal, dus van deze soorten animaties moet altijd worden verwacht dat ze schokkerig zijn.,

Tumbling letters

  • Zoals te zien op: Spel van het Jaar
  • Auteur: Leon bruin

Google ‘ s Game van het Jaar beschikt over een speelse CSS animatie op de homepage, met de titel woorden tumbling en elkaar botsen. Dit is hoe het werd gedaan.

de eerste stap is het definiëren van het webpagina document met HTML. Het bestaat uit de html-document container, die een head en body sectie opslaat., Terwijl de head-sectie wordt gebruikt om de externe CSS-en JavaScript-bronnen te laden, wordt de body gebruikt om de pagina-inhoud op te slaan.

de pagina-inhoud bestaat uit drie H1 titellabels die de verschillende variaties van het animatie-effect laten zien. Terwijl elke tekst kan worden ingevoegd in deze tags, hun animatie wordt gedefinieerd door de namen in de klasse attribuut. De presentatie-en animatie-instellingen voor deze klassenamen zullen later in de CSS worden gedefinieerd.

maak vervolgens een nieuw bestand aan met de naam ‘ code.js’., We willen alle pagina-elementen met de animate-Klasse vinden en een array-lijst maken die elk woord van de binnentekst vertegenwoordigt. De initiële animatie vertraging wordt ook gedefinieerd in deze stap. Pagina-inhoud is niet beschikbaar totdat de pagina volledig is geladen, dus deze code wordt in het venster load event listener geplaatst.

het woord inhoud van de animatie items moet worden opgenomen in een span element. Om dit te doen, wordt de bestaande HTML-inhoud gereset naar leeg, dan wordt een lus gebruikt om het woord in de geà dentificeerde ‘woorden’ – lijst Een span-element te maken., Daarnaast wordt een animationDelay-stijl toegepast-berekend in relatie tot de initiële vertraging (hieronder gespecificeerd) en de indexpositie van het woord.

Maak een nieuw bestand aan met de naam styles.css. Nu zullen we de presentatieregels instellen die deel zullen uitmaken van elk woordelement in de animatie, gecontroleerd door hun span tag. Weergeven als blok, gecombineerd met gecentreerde tekstuitlijning, zal resulteren in elk woord verschijnen op een aparte regel horizontaal uitgelijnd met het midden van de container. Relatieve positionering zal worden gebruikt om te animeren in relatie tot de tekst-flow positie.,

.animate span{display: block;position: relative;text-align: center;}

animatie-elementen die de klasse achteruit en vooruit hebben, hebben een specifieke animatie. Deze stap definieert de animatie die moet worden toegepast op span-elementen waarvan de bovenliggende container zowel de animate-klasse als de klasse achteruit of vooruit heeft.

merk op dat er geen ruimte is tussen de animate en backwards class referentie, wat betekent dat het bovenliggende element beide moet hebben.

De gemengde animatie wordt gedefinieerd met dezelfde instellingen als voor de vooruit-en achteruitrijanimaties., In plaats van de animaties toe te passen op elk kind van de ouder, wordt de Nth-child selector gebruikt om afwisselende animatie-instellingen toe te passen. De achterwaartse animatie wordt toegepast op elk even-Nummer kind, terwijl de forwards animatie wordt toegepast op elk oneven-nummer kind.

de animaties die we zojuist hebben gemaakt zijn gemaakt met een initiële’ from ‘ startpositie, zonder verticale positie of rotatie aanpassing. De ‘ to ‘ – positie is de eindtoestand van de animatie, die de elementen instelt met een aangepaste verticale positie en rotatietoestand., Iets verschillende eindinstellingen worden gebruikt voor beide animaties om te voorkomen dat de tekst onleesbaar wordt als gevolg van overlap in gemengde animaties.

Flip book

  • auteur: Adam Kuhn

wanneer geanimeerd wordt met CSS is soms een doodeenvoudige aanpak nodig. En er zijn weinig eenvoudigere animatiemethoden dan het flip-boek. Met behulp van steps () als onze timing functie, zijn we in staat om dit effect te repliceren. Hoewel dit schokkerig klinkt en direct in tegenspraak is met onze missie om de vloeibaarheid te behouden, kan het met de juiste tempo net zo naadloos organisch aanvoelen.

dus hoe werkt het?, We definiëren onze animatie easing functie met slechts een paar extra parameters-vertellen onze animatie hoeveel stappen er nodig zijn en op welk punt tijdens de eerste stap we willen beginnen (start, end) – kijken Een beetje als deze, bijvoorbeeld steps (10, start).

binnen onze keyframes kunnen we nu een eindpunt aanwijzen voor onze animatie: laten we in dit voorbeeld aannemen dat onze animatie 10 seconden lang is en dat we 10 stappen gebruiken. In dit geval zal elke stap een seconde lang zijn, onmiddellijk naar het volgende frame van één seconde zonder overgang tussen.,

nogmaals, dit lijkt te vliegen in het gezicht van vloeibaarheid, maar hier is waar stepped animaties echt kunnen schitteren. We kunnen stapsgewijs itereren door een sprite blad en animeren frame-voor-frame net als een flip boek. Door frames van gelijke grootte te definiëren, maar ze te compileren op een enkele horizontale (of verticale) afbeelding, kunnen we deze afbeelding instellen als een elementachtergrond en een pixel of percentage achtergrondpositie definiëren als een eindpunt voor onze animatie, waardoor een enkele stap voor elk frame mogelijk is., Het sprite-blad zal dan verschuiven en het element frame voor frame vullen met een frisse achtergrondafbeelding op basis van zijn positie.

laten we een voorbeeld bekijken. In dit geval enkele sets van geanimeerde benen toegevoegd aan een aantal tekstkarakters. Eerst definiëren we onze animatienaam, duur, aantal stappen, startpositie en aantal iteraties: 

animation:runner 0.75s steps(32, end) infinite;

nogmaals, merk op dat de duur relatief snel is op minder dan een volle seconde voor 32 totaal frames., Vervolgens definiëren we onze keyframes: 

@keyframes runner{ from{ background-position:0px 50%;} to{ background-position:-1280px 50%; }}

merk op dat de verticale positionering van de afbeelding consistent is, wat ons vertelt dat de sprites horizontaal over de afbeelding zijn uitgerekt, wat 1280px in totale breedte is. Aangezien we 32 totaal frames voor dat beeld hebben gedefinieerd, kunnen we afleiden dat elk frame 40px breed moet zijn. Bekijk deze Codepen hieronder.

Het is belangrijk om op te merken dat een groot sprite-blad mogelijk een ernstige drag on-performance kan zijn, dus zorg ervoor dat u afbeeldingen formatteert en comprimeert., Met een goed vormgegeven sprite sheet en een passende animatieduur heb je nu een vloeiende animatie die complexe bewegingen kan overbrengen.

Blowing bubbles

  • zoals te zien op: 7UP
  • bekijk de code
  • Auteur: Steven Roberts

de CSS bubble animatie die op 7UP is een mooi voorbeeld van het dragen van een merk thema door in het ontwerp van de website. De animatie bestaat uit een paar elementen: de SVG ‘tekening’ van de bubbels en vervolgens twee animaties toegepast op elke bubbel.,

de eerste animatie verandert de ondoorzichtigheid van de zeepbel en verplaatst deze verticaal in het beeldvenster; de tweede creëert het wiebelende effect voor extra realisme. De offsets worden afgehandeld door elke bubble te targeten en een andere animatieduur en vertraging toe te passen.

om onze bubbels te maken gebruiken we SVG. In onze SVG maken we twee lagen bubbels: een voor de grotere bubbels en een voor de kleinere bubbels. In de SVG positioneren we al onze bubbels onderaan het zichtvenster.,

om twee afzonderlijke animaties toe te passen op onze SVG ‘ s, beide met behulp van de eigenschap transform, moeten we de animaties toepassen op afzonderlijke elementen. Het<g> element in SVG kan worden gebruikt als een div in HTML; we moeten elk van onze bubbels (die al in een groep zitten) in een groep tag wikkelen.

<g> <g transform="translate(10 940)"> <circle cx="35" cy="35" r="35"/> </g></g>

CSS heeft een krachtige animatie-engine en heel eenvoudige code om complexe animaties te produceren., We beginnen met het verplaatsen van de bubbels op het scherm en het veranderen van hun dekking om ze in en uit te vervagen aan het begin en einde van de animatie.

@keyframes up { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1024px); }}

om een wiebelend effect te creëren, moeten we de bubble gewoon naar links en rechts verplaatsen (of vertalen), met precies de juiste hoeveelheid – te veel zal ervoor zorgen dat de animatie er te veel uit ziet en de verbinding verbroken wordt, terwijl te weinig meestal onopgemerkt blijft. Experimenteren is de sleutel met bij het werken met animatie.,

@keyframes wobble { 33% { transform: translateX(-50px); } 66% { transform: translateX(50px); } }

om de animatie op onze bubbels toe te passen, gebruiken we de groepen die we eerder hebben gebruikt en de hulp van nth-of-type om elke bubbelgroep afzonderlijk te identificeren. We beginnen met het toepassen van een opaciteitswaarde op de bubbels en de eigenschap will-change om hardwareversnelling te gebruiken.

.bubbles-large > g { opacity: 0;will-change: transform, opacity;}.bubbles-large g:nth-of-type(1) {...}....bubbles-small g:nth-of-type(10) {...}

we willen alle animatietijden en vertragingen binnen een paar seconden van elkaar houden en ze oneindig herhalen. Tot slot passen we de ease-in-out timing functie toe op onze wobble animatie om het er een beetje natuurlijker uit te laten zien.,

Scrolling mouse

  • zoals te zien op: Baltic Training
  • bekijk de code
  • Auteur: Steven Roberts

een subtiele scrollende muisanimatie kan de gebruiker richting geven wanneer hij voor het eerst op een website landt. Hoewel dit kan worden bereikt met behulp van HTML-elementen en eigenschappen, gaan we SVG gebruiken omdat dit meer geschikt is voor tekenen.

binnen onze SVG hebben we een rechthoek met afgeronde hoeken en een cirkel nodig voor het element dat we gaan animeren, met behulp van SVG kunnen we het pictogram schalen naar elke gewenste grootte.,

nu we onze SVG hebben gemaakt, moeten we enkele eenvoudige stijlen toepassen om de grootte en positie van het pictogram in onze container te bepalen. We hebben een link rond de muis SVG gewikkeld en gepositioneerd naar de onderkant van het scherm.

.scroll-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);}.mouse { max-width: 2.5rem; width: 100%; height: auto;}

vervolgens maken we onze animatie. Op 0 en 20 procent van de weg door onze animatie, willen we de toestand van ons element instellen als het begint. Door het in te stellen op 20% van de weg door, zal het stil blijven voor een deel van de tijd wanneer oneindig herhaald.,

@keyframes scroll { 0%, 20% { transform: translateY(0) scaleY(1); }}

We moeten het beginpunt van de dekking toevoegen en dan zowel de Y-positie als de verticale schaal transformeren op het 100% – teken, het einde van onze animatie. Het laatste wat we moeten doen is de ondoorzichtigheid laten vallen om onze cirkel te vervagen.

@keyframes scroll { ... 10% { opacity: 1; } 100% { transform: translateY(36px) scaleY(2); opacity: 0.01; }}

ten slotte passen we de animatie toe op de cirkel, samen met de eigenschap ‘transform-origin’ en de eigenschap will-change om hardwareversnelling toe te staan. De animatie eigenschappen zijn vrij vanzelfsprekend., De cubic-bezier timing functie wordt gebruikt om de cirkel eerst terug te trekken voordat u deze naar de onderkant van onze muisvorm laat vallen; dit voegt een speels gevoel toe aan de animatie.,

Geanimeerde schrijven

Klik op om de animatie te zien in actie
  • Zoals te zien op: Tuin Acht
  • Bekijk de code voor de paden en tekst
  • Auteur: Steven Roberts

De Tuin Acht website maakt gebruik van een gemeenschappelijk animatie-techniek waarbij de tekst lijkt te worden geschreven. Om het effect te bereiken, wenden we ons tot SVG. Om te beginnen maken we de SVG., Er zijn twee benaderingen hier: converteer de tekst naar paden om ze te animeren of gebruik SVG-tekst. Beide benaderingen hebben hun voor-en nadelen.

begin met het maken van onze keyframe animatie. De enige functie die we nodig hebben om het uit te voeren is het veranderen van de slag-dashoffset. Nu we onze animatie hebben gemaakt, moeten we de waarden toepassen waaruit we willen animeren. We stellen de slag-dasharray, die gaten in de slag zal creëren. We willen onze slag zo instellen dat deze groot genoeg is om het hele element te bedekken, en uiteindelijk het streepje compenseren met de lengte van de slag.,

De magie gebeurt wanneer we onze animatie toepassen. Door het animeren van de offset, brengen we de lijn in beeld – het creëren van een tekeneffect. We willen dat de elementen één voor één tekenen, met enige overlap tussen het einde van het tekenen van een element en het begin van het volgende tekenen. Om dit te bereiken wenden we ons tot Sass/SCSS en nth-of-type om elke letter te vertragen met de helft van de lengte van de animatie, vermenigvuldigd met de positie van die specifieke letter.,

Vliegende vogels

  • Zoals te zien op: Fournier Père et Fils
  • Bekijk de code voor een enkele vogel of de hele kudde
  • Auteur: Steven Roberts

We beginnen met volledig recht vector lijnen, tekenen elk frame van onze animatie, die de vogel in een andere lidstaat van de vlucht. We manipuleren dan de vectorpunten en rond de lijnen en randen. Tot slot zetten we elk frame in een even grote doos en plaatsen ze naast elkaar. Exporteer het bestand als een SVG.

de html-instelling is heel eenvoudig., We hoeven alleen maar elke vogel in een container te wikkelen om meerdere animaties toe te passen – een om de vogel te laten vliegen en de andere om het over het scherm te verplaatsen.

<div class="bird-container"> <div class="bird"></div></div>

We passen onze vogel SVG toe als de achtergrond van onze vogel div en kiezen de grootte die we elk frame willen hebben. We gebruiken de breedte om de nieuwe achtergrondpositie ruwweg te berekenen. De SVG heeft 10 cellen, dus we vermenigvuldigen onze breedte met 10 en dan veranderen we het getal iets totdat het er goed uitziet.

CSS animatie heeft een paar trucs waarvan u zich misschien niet bewust bent., We kunnen de animatie-timing-functie gebruiken om de afbeelding in stappen te tonen – net als door pagina ‘ s in een notebook Bladeren om te zinspelen op animatie.

nu hebben we onze vliegcyclus gecreëerd, onze vogel slaat momenteel met haar vleugels, maar gaat nergens heen. Om haar over het scherm te verplaatsen, maken we een andere keyframe animatie. Deze animatie zal de vogel horizontaal over het scherm bewegen, terwijl ook de verticale positie en de schaal verandert om de vogel realistischer over het scherm te laten meanderen.

zodra we onze animaties hebben gemaakt, hoeven we ze alleen maar toe te passen., We kunnen meerdere kopieën van onze vogel maken en verschillende animatietijden en vertragingen toepassen. 

.bird--one { animation-duration: 1s; animation-delay: -0.5s;}.bird--two { animation-duration: 0.9s; animation-delay: -0.75s;}

Kruis mijn hamburger

  • zoals te zien op: Better Brand Agency
  • bekijk de code voor de overspanningen en SVG
  • Auteur: Steven Roberts

Deze animatie wordt overal op het web gebruikt, waarbij drie regels worden omgezet in een kruis-of sluitpictogram., Tot voor kort, de meeste implementaties zijn bereikt met behulp van HTML-elementen, maar eigenlijk SVG is veel meer geschikt voor dit soort animatie – er is niet langer een noodzaak om bloat uw knoppen code met meerdere overspanningen.

vanwege de animeerbare natuur en SVG en zijn Bevaarbare DOM, verandert de code om de animatie of overgang te bereiken zeer weinig – de techniek is hetzelfde.

we beginnen met het maken van vier elementen, zij het overspanningen binnen een div of paden binnen een SVG., Als we overspanningen gebruiken, moeten we CSS gebruiken om ze in de div te plaatsen; als we SVG gebruiken, is dit al geregeld. We willen de Lijnen 2 en 3 in het midden plaatsen – de ene op de andere – terwijl we de Lijnen 1 en 4 gelijkmatig boven en onder verdelen, waarbij we er zeker van zijn dat we de oorsprong van de transformatie centreren.

We gaan vertrouwen op de overgang van twee eigenschappen: ondoorzichtigheid en rotatie. Allereerst willen we Lijnen 1 en 4 vervagen, die we kunnen richten met de: nth-child selector.,

.menu-icon.is-active {element-type}:nth-child(1),.menu-icon.is-active {element-type}:nth-child(4) { opacity: 0; }

het enige wat je nog moet doen is de twee middelste lijnen richten en ze 45 graden in tegengestelde richtingen draaien.

Chasing circles

  • zoals te zien op: Better Brand Agency
  • bekijk de code
  • Auteur: Steven Roberts

Het geanimeerde laadpictogram bestaat uit vier cirkels. De cirkels hebben geen vulling, maar hebben wisselende kleuren.

in onze CSS kunnen we een aantal basiseigenschappen instellen op al onze cirkels en dan de :nth-of-type selector gebruiken om een andere slag-dasharray toe te passen op elke cirkel.,

vervolgens moeten we onze keyframe animatie aanmaken. Onze animatie is heel eenvoudig: we hoeven alleen maar de cirkel 360 graden te draaien. Door onze transformatie te plaatsen op de 50% markering van de animatie, zal de cirkel ook terug draaien naar zijn oorspronkelijke positie.

@keyframes preloader { 50% { transform: rotate(360deg); } }

met onze animatie aangemaakt, hoeven we het nu alleen maar toe te passen op onze Cirkels. We stellen de animatie naam; duur; iteratie aantal en timing functie. De ‘ease-in-out’ geeft de animatie een speelser gevoel.,

op dit moment hebben we onze lader, maar alle elementen draaien tegelijkertijd samen. Om dit op te lossen, zullen we wat vertragingen toepassen. We zullen onze vertragingen creëren met een Sass voor loop.

@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s;} }

vanwege de vertragingen animeert onze cirkel nu op zijn beurt, waardoor de illusie ontstaat dat de cirkels elkaar achtervolgen. Het enige probleem hiermee is dat wanneer de pagina voor het eerst wordt geladen, de cirkels statisch zijn, dan beginnen ze te bewegen, één voor één. We kunnen hetzelfde offset effect bereiken, maar stoppen met de ongewenste pauze in onze animatie door simpelweg de vertragingen in te stellen op een negatieve waarde.,

animation-delay: -#{$i * 0.15}s;

Next page: More CSS animation examples to explore