Share
CSS is in de loop der jaren op verschillende manieren gerijpt, niet het minst in termen van CSS-animaties. Met elke dag die verstrijkt, creëren steeds meer ontwikkelaars levende, ademende interfaces. In dit artikel bekijken we de staat van CSS-animaties, hoe deze is gegroeid, waar deze toe in staat is en welke bronnen en hulpmiddelen beschikbaar zijn. Laten we gaan!
Het gebruik van animaties op het web neemt toe, grotendeels vanwege de overgang en @keyframes toevoegingen aan CSS. Er was eens een tijd dat animaties en CSS elkaar niet kenden, maar dat is vandaag niet het geval. Artikelen, tutorials, premium cursussen en zelfs bewegingsrichtlijnen zijn nu veel toegankelijker dan ze ooit waren. Het combineren @keyframes met de animatie eigendom, samen met overgang heeft eindelijk ontwikkelaars de kans gegeven om op de juiste manier bewegingen te maken en geeft interfaces een persoonlijkheid en leven als ze eenmaal niet zijn bekeken.
Uit de Material Motion Guidelines van GoogleEr is nog nooit een spannendere tijd geweest voor CSS-animaties en interactieontwerp dan nu!
Huidige implementatie van de animatie Met de eigenschap kunnen ontwikkelaars de duur, timing, vertraging, iteratietelling, richting, opvulmodus en afspeelstatus regelen. Het timinggedeelte staat ook een a toe stappen() functie. Deze speciale timingfunctie breekt een animatie of overgang in segmenten (zoals een filmstrook) in plaats van als een continue overgang van de ene naar de andere status. Met hoofdframes kunnen bewegingsontwikkelaars posities aangeven met behulp van van, naar en zelfs percentages om te animeren tussen aangegeven eigenschapswaarden. Dat is een goed begin, maar we zullen het in een moment bespreken waar het tekortschiet.
Dan is er de glorieuze overgang eigendom; een eigenschap net zo luxe als animatie en een waarmee we de animatiesnelheid kunnen regelen bij het wijzigen van eigenschappen. Het overgangsproces tussen twee toestanden wordt typisch een genoemd impliciete overgang; een term die de toestanden tussen de start- en eindtoestanden beschrijft, impliciet gedefinieerd door de browser. Overgangen maken momenteel het aanpassen van de eigenschap, timing, duur en vertraging mogelijk.
De introvideo hierboven is afkomstig van Up and Running With CSS Transitions van Craig Campbell.
CSS-animatie kan krachtig zijn terwijl het zit, maar het ontbreekt nog steeds aan een bepaald aspect waarnaar animators het meest verlangen; tijdlijn-achtige controle. Wat ik hiermee bedoel zijn sequenties die kunnen worden beïnvloed en gemanipuleerd op basis van timing.
@keyframes move-object van beginpositie eigenschap en waarden bij 2s doei wait-until 4s this happens to stop position property and values
De syntaxis hierboven bestaat niet, maar schetst een beeld in meer detail van wat animatiespecialisten op het web hunkeren. GreenSock is bijvoorbeeld bekend voor dit type sequencing, maar gebeurt helaas alleen in JavaScript. Zou het niet geweldig zijn om dit ook in CSS te hebben? ik denk het.
Video hierboven genomen van GreenSock Animation Platform: First Steps van Craig Campbell.
Er is zeker het vermogen om te controleren animatie en overgang gebeurtenissen door het gebruik van JavaScript voor verdere granulaire controle van een reeks. Met JavaScript kunnen ontwikkelaars het begin van elke nieuwe animatie-iteratie detecteren, wanneer een animatie plaatsvindt, wanneer de animatie eindigt en hetzelfde geldt voor overgangsgebeurtenissen.
Dit zijn behoorlijk opwindende tijden voor het ontwikkelen van browserontwikkelaars om CSS-animaties te inspecteren en aan te passen. De meeste browsers (Firefox, Chrome) maken CSS-animatiesinspectie mogelijk met betrekking tot Safari en Edge. Van wat mij is verteld door een bron die voor Microsoft werkt, is het inspecteren van animaties iets dat het Microsoft-team echt wil doen. Laten we hopen dat dit hetzelfde is voor Safari.
Met betrekking tot de browsers dat do ondersteuning voor animatie-inspectie, we hebben de volgende capaciteiten ...
Accentsconagua
::voor en ::na pseudo-elementen.keyframes eigendom en waarden on the fly.keyframes namen.Hoewel ontwikkelaars nogal wat kunnen kiezen op basis van de bovenstaande lijst, hebben ze nog steeds meer gereedschap nodig voor animaties met betrekking tot gebruikersinteractie. Dit kan ook bekend zijn als eigenschapinterpolatie, het invoegen van een tussenwaarde in een reeks door deze te berekenen uit de omringende bekende waarden; net zoals wanneer je met overgangen overschakelt naar een nieuwe waarde. Deze dynamische / reactieve animaties kunnen op elk moment beginnen, zijn onbepaald en hebben variabele tijdsduren op basis van gebruikersinteractie. Nogmaals iets dat niet kan worden gedebugd of geïnspecteerd van ontwikkelaarsgereedschappen die door een browser op dit moment worden geleverd.
De toekomst ziet er rooskleurig uit voor CSS-animaties, hoewel alles in verband staat met de neiging om langzaam te bewegen. De CSS motion path module, bevatten, zal veranderen en de voorkeur gereduceerde-motion media-query (nog niet standaard en alleen WebKit) zijn de huidige aankomende functies voor CSS-animators.
Met bewegingspaden kunnen ontwikkelaars elk grafisch object animeren langs een door de auteur opgegeven pad. U kunt een pad op dezelfde manier definiëren als gedefinieerd door SVG 1.1.
.my-element bewegingspad: pad ('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7 , 0,1-13,3,7,2-22,1,17,1 c-8,9,8,8-15,7,17,9-25,4,17,9s-17,5-7,8-17,5-17,5s7,8-17,5,17,5-17,5S86,2,38,6,93,9,46,4 z '); bewegings-offset: 0; bewegingsrotatie: omgekeerd; De motion path definieert een pad dat een element zal volgen of zal volgen. Onze -Motion offset eigenschap is de positieplaatsing van het element ergens op het pad. Het eigendom motion rotatie is de richting waarin het element "wijst" terwijl het langs het pad beweegt.
Bekijk deze demo-collecties op CodePen van Dan Wilson die live voorbeelden geven motion path mogelijkheden.
De zal veranderen property biedt een manier voor auteurs om browsers te wijzen op het soort wijzigingen dat verwacht wordt voor een element. Hiermee kan de browser van tevoren geschikte optimalisaties instellen voordat het element daadwerkelijk wordt gewijzigd.
.my-element will-change: transform;
Dit soort optimalisatie kan de waargenomen laadtijd en lay-out van een pagina verbeteren door dure werkzaamheden van tevoren uit te voeren voordat ze daadwerkelijk nodig zijn. Dat gezegd hebbende, wordt gesuggereerd dat ontwikkelaars niet van toepassing zijn zal veranderen te veel elementen, omdat het bronnen kan verbruiken en een pagina kan vertragen.
Deze niet-spec-toevoeging aan WebKit creëert stijlen die grote bewegingsgebieden voor gebruikers voorkomen die een voorkeur aangeven voor minder beweging Systeem voorkeuren.
@media (geeft de voorkeur aan gereduceerde beweging) .my-element animation: none;
Dit is meer een toegankelijkheidssituatie versus daadwerkelijke bewegingsvorming. Een interessant om te overwegen en tot een om uit te checken op uw gemak.
Deze CSS-module geeft aan dat de substructuur van het element onafhankelijk is van de rest van de pagina, waardoor zware optimalisaties door gebruikersagenten mogelijk zijn bij correct gebruik. De meest interessante voor CSS-animators is de verf waarde die kan worden doorgegeven.
.element-met-beweging bevatten: verf;
Als het bevattende element buiten beeld of onduidelijk is, kan de browser de inhoud direct overslaan omdat deze gegarandeerd buiten beeld of onleesbaar is. Dit levert uiteindelijk waarde op door een snellere renderingpijplijn te bieden tijdens een eerste verflaag. Dit is momenteel nog steeds een werkversie van het W3C.
Er zijn tal van manieren om CSS-animaties bij te houden. Hieronder vindt u enkele hulpmiddelen en bronnen, waaronder specificaties om op uw gemak te lezen. Als je andere geweldige en nuttige bronnen kent, laat het ons dan weten in de reacties en we zullen ze aan de lijst toevoegen. Blij geanimeerd!
