CSS-animaties

Er zijn veel programma's waarmee je kunt bewerken, montages kunt maken of zelfs kunt maken animaties, elke keer zijn er veel software die dit soort interactieve projecten toevoegt. In dit bericht gaan we je niet alleen kennis laten maken met de wereld van animaties, maar we gaan je ook voorstellen aan een nieuwe vriend.

Zoals u weet, zit de computerwereld vol met commando's en handige tools voor de ontwikkeling van webpagina's of online media, die momenteel naast elkaar bestaan. Blijf bij ons en ontdek in deze nieuwe tutorial een andere manier om je computerniveau en interactiviteit te verhogen.

Wat zijn animaties?

We willen dat je de tutorial volledig ingaat, maar hiervoor is het noodzakelijk om de wereld van animaties of wat het in grafisch ontwerp betreft, de wereld van interactief ontwerp. 

Animaties maken ook deel uit van de audiovisuele wereld, in feite zouden ze niets zijn als of omdat daarin een audio en een bewegend beeld worden geïntroduceerd. Om deze reden, wanneer we spreken van «animatie», verwijzen we naar wat in de volksmond bekend staat als «cartoons».

Zoals hierboven samengevat, komt animatie voort uit het vermogen om iets in beweging te brengen, in dit geval tekenfilms. Maar hoe komen al deze bewegingen tot stand?Nou, zonder twijfel komen ze voort uit wat we noemen, reeksen tekeningen of foto's dat ze door achtereenvolgens, de een na de ander, een geloofwaardige beweging voor onze ogen te genereren, die zich lenen en het spel van visuele illusie binnengaan.

Vroeger werden de eerste animaties ontworpen op vellen papier, in elk van hen werd het geanimeerde personage getekend door stappen te nemen, en zodra het einde van het vel was bereikt, werd het snel één voor één doorgegeven om het effect van beweging in de tekening.

Animatietypes

Er zijn verschillende soorten animatie:

Cartoon of traditionele animatie

Deze stijl bestaat uit het frame voor frame beweging geven aan de protagonist. In het begin, toen er niet genoeg audiovisuele middelen waren, werden ze uitgevoerd door middel van het tekenen en schilderen van elk frame (inclusief de achtergrond, het podium of de achtergrond van de animatie), om later te worden gefilmd op wat we kennen als een filmband.

Stop Motion

Stop Motion is een animatietechniek die niets met tekenfilms te maken heeft. Bovendien is het hoofddoel het simuleren van de bewegingen van objecten die in werkelijkheid volledig statisch zijn en is verdeeld in twee fasen: animatie van klei of kleibeweging en animatie van starre objecten.

Pixelvorming

Pixelation is een techniek die voortkomt uit Stop Motion en bestaat uit het werken met objecten die geen poppen of modellen zijn, maar gewone objecten of mensen. Objecten worden meerdere keren gefotografeerd en verschuiven licht met elk frame.

Rotoscopie

Het bestaat uit het direct tekenen van een andere tekening, zoals het overtrekken van een tekening op een andere tekening of van een echt persoon. Het wordt beschouwd als een voorloper van mocap, dat wil zeggen van motion capture die wordt gebruikt om digitale karakters in de filmwereld na te bootsen.

Animatie door middel van uitsnijdingen of uitgesneden animatie

Het is een techniek die bestaat uit het snijden van figuren, deze figuren kunnen worden weergegeven op papier of in foto's. Het lichaam van de personages is opgebouwd op basis van uitsnijdingen en beweging en animatie komen voort uit een vervanging van die uitsnijdingen.

Animatie 3D

3D-animatie is afkomstig van een bewerkingsprogramma waarmee simulaties en animaties kunnen worden uitgevoerd. Binnen deze twee varianten komen goede belichting, camerabewegingen en special effects met elkaar in contact.

Momenteel zijn er ook andere technieken zoals: het schilderij op glas, de animatie van zand, het scherm van gujas en het schilderij op celluloid. 

Wat is CSS?

Nu je wat meer weet over de wereld van animaties, is het tijd voor ons om je kennis te laten maken met de wereld van CSS-acroniemen.

stands CSS, zie "cascading style sheets". Het wordt gevormd door een taal die wordt gebruikt in de ontwerpsector en bij de presentatie van webpagina's, nog beter, het zijn een reeks hulpmiddelen en opdrachten die verantwoordelijk zijn voor het presenteren van een webpagina zoals we deze voor het eerst zien het is al aangemaakt. Werkt samen met de tool HTML (georganiseerd vanuit de basisinhoud van de pagina's).

De naam wordt bepaald door het aantal vellen dat het bevat en een ervan erft eigenschappen of kenmerken van anderen. Dat wil zeggen, u kunt met een eenvoudig blogsjabloon werken, maar wanneer u het uiterlijk van een site wilt aanpassen, moet u CSS implementeren die samen met een goed CMS u zal helpen het bereik van uw inhoud te vergroten.

Waar is CSS voor?

Met CSS kunt u uw pagina ordenen, dat wil zeggen, u kunt uw webpagina vertellen hoe u alle informatie wilt vinden, zodat de kijker gemakkelijk te hanteren en tegelijkertijd nuttig is. Voer hier alle commando's in van sommige elementen die deel uitmaken van de stijl of het ontwerp van de webpagina, bijvoorbeeld de lettertypen, kleuren, maten etc. 

Normaal gesproken, zodat u beter begrijpt waar deze tool over gaat, zijn digitale marketingspecialisten de eersten die dit begrijpen, aangezien zij degenen zijn die ermee omgaan.

Animeren in CSS

Nou, nu je een beetje weet over de wereld van animaties en CSS. Het is tijd om de tutorial te starten.

Met CSS-animaties kunt u de overgang tussen de ene CSS-stijl en de andere animeren. Deze animaties bestaan ​​uit twee componenten: a stijl die CSS-animatie en een set van . beschrijft frames die de begin- en eindtoestand aangeven, evenals mogelijke tussenliggende punten daarin.

Elk van deze animaties heeft een aantal voordelen:

• Het gebruik ervan is heel gemakkelijk voor eenvoudige animaties, je kunt het zelfs doen zonder kennis van Javascript.
• Animatie wordt correct weergegeven, zelfs op computers met een laag stroomverbruik.
• Omdat het wordt bestuurd door een browser, kunnen de prestaties en efficiëntie worden geoptimaliseerd, waardoor de frequentie wordt verminderd en de tabbladen zodanig worden uitgevoerd dat ze niet zichtbaar zijn.

Animatie-instellingen

Om een ​​animatie te starten, moeten we deze eerst configureren. Om dit te doen, gaan we naar de accommodatie animatie en naar zijn sub-eigenschappen. Met deze tool kunnen we zowel het ritme als de duur van de animatie configureren en zelfs niet de volgorde ervan.

De sub-eigenschappen zijn:

animatie - vertraging

Vertragingstijd tussen het moment dat het element wordt geladen en het begin van de animatiereeks.

animatie - richting

Geeft aan of de animatie moet terugspoelen naar het startframe aan het einde van de reeks of dat deze vanaf het begin aan het einde moet beginnen.

animatie - duur

Geeft de hoeveelheid tijd aan die de animatie nodig heeft om de cyclus te voltooien (de duur)

animatie - iteratie - count

Het aantal keren dat het wordt herhaald. We kunnen aangeven: oneindig om de animatie oneindig te herhalen.

animatie - naam

Het wordt gebruikt om de naam op te geven die elk van de frames van de animatie beschrijft.

animatie - spelen - status

Hiermee kunt u de animatiereeks pauzeren en hervatten.

animatie - timing- functie

Het geeft het ritme van de animatie aan, dat wil zeggen, hoe de animatieframes worden weergegeven, hiervoor worden versnellingscurven vastgesteld.

animatie - vul - modus

Geeft aan welke waarden de eigenschappen hebben nadat de animatie is afgelopen.

Stel de reeks in met frames

Nadat we de tijd, de nomenclatuur enz. Het is tijd om onze animatie een look of feel te geven.

Om dit te doen, zullen we twee nieuwe frames maken en de regel gebruiken @sleutelframes. Hiermee beschrijft elk frame hoe elk element wordt gevonden tijdens de animatiereeks.

om de aan te geven tijd en ritme, het frame gebruikt percentage en van en naarHierdoor kunnen we aangeven wanneer het begin plaatsvindt met 0% en het einde met 100%.

Frame- en tekstanimatie

Om meer frames toe te voegen en ze te animeren met tekst, moet u een grotere grootte van het koptekstlettertype toepassen, zodat de koptekst toeneemt naarmate deze een bepaalde tijd beweegt en daarna verkleint tot de oorspronkelijke grootte. Hiervoor gaan we de volgende code opstellen:

75% lettertype - grootte: 300%; marge - links: 25%; breedte: 150%;

Met deze code stellen we de browser voor dat in 75% van de reeks de kop een linkermarge heeft van 25% en een grootte van 200% met een breedte van 150%.

animatie herhalen

Om een ​​animatie te herhalen, is het nodig om de volgende eigenschap te gebruiken: animatie - iteratie - count en we moeten aangeven hoe vaak we willen dat het herhaald wordt. We kunnen ook gebruik maken van oneindig zodat het steeds herhaald wordt.

Conclusie

Zoals je hebt gezien, kun je in CSS geanimeerde projecten maken en je kunt deze invoeren door de stappen te volgen die we je hebben gegeven. Als u doorgaat met informeren en informeren, zult u ontdekken dat er veel mogelijkheden voor ons zijn.

Heb je het al gedurfd?