CSS animationer

Der er mange programmer, hvor du kan redigere, lave montager eller endda oprette animationer, hver gang er der mange software, der tilføjer denne type interaktive projekter. I dette indlæg vil vi ikke kun introducere dig til animationernes verden, men vi vil også introducere dig til en ny ven.

Som du godt ved, er computerverdenen fuld af kommandoer og nyttige værktøjer til udvikling af websider eller onlinemedier, som i øjeblikket eksisterer side om side. Bliv hos os og opdag i denne nye tutorial en anden måde at øge dit niveau med databehandling og interaktivitet.

Hvad er animationer?

Vi vil gerne have, at du går helt ind i tutorialen, men for dette er det nødvendigt at gå ind i animationernes verden eller hvad det angår grafisk design, verden af interaktivt design. 

Animationer er også en del af den audiovisuelle verden, faktisk ville de ikke være noget, hvis eller fordi der i dem introduceres en lyd og et levende billede. Af denne grund, når vi taler om "animation", henviser vi til det, der populært er kendt som "tegnefilm".

Som opsummeret ovenfor opstår animation fra evnen til at give bevægelse til noget, i dette tilfælde tegnefilm. Men hvordan opnås alle disse bevægelser? Nå, uden tvivl stammer de fra det, vi kalder, sekvenser af tegninger eller fotografier at de ved at blive ordnet fortløbende, den ene efter den anden, formår at generere en troværdig bevægelse foran vores øjne, som egner sig og går ind i den visuelle illusions leg.

Tidligere blev de første animationer designet på ark papir, i hver af dem blev den animerede karakter tegnet ved at tage skridt, og når slutningen af ​​arket var nået, blev den hurtigt passeret én efter én for at opnå effekten af ​​bevægelse i tegning.

Animationstyper

Der er forskellige typer animation:

Tegnefilm eller traditionel animation

Denne stil består af at give bevægelse til hovedpersonen billede for billede. I begyndelsen, hvor der ikke var nok audiovisuelle midler, blev de udført gennem tegning og maling af hver enkelt ramme (inklusive baggrunden, scenen eller baggrunden for animationen), for senere at blive filmet på det, vi kender som et filmbånd.

Stop bevægelse

Stop Motion er en animationsteknik, der ikke har noget med tegnefilm at gøre. Desuden er dens hovedformål at simulere bevægelser af objekter, der i virkeligheden er totalt statiske, og det er opdelt i to faser: animation af ler eller claymotion og animation af stive objekter.

Pixelering

Pixelering er en teknik, der kommer fra Stop Motion og består i at arbejde med genstande, der hverken er dukker eller modeller, men almindelige genstande eller mennesker. Objekter fotograferes flere gange og skifter lidt med hver ramme.

Rotoskopi

Det består af den direkte tegning af en anden tegning, såsom sporing af en tegning på en anden tegning eller af en virkelig person. Det betragtes som en forløber for mocap, det vil sige motion capture, der bruges til at genskabe digitale karakterer i biografens verden.

Animation efter udskæringer eller udskårne animationer

Det er en teknik, der består af at skære figurer, disse figurer kan være repræsenteret på papir eller i fotografier. Karakterernes krop er bygget baseret på udskæringer, og bevægelse og animation opstår ved en udskiftning af de nævnte udskæringer.

Animation 3D

3D-animation stammer fra et redigeringsprogram, som gør det muligt at udføre simuleringer og animationer. Inden for disse to varianter kommer god belysning, kamerabevægelser og specialeffekter i kontakt.

I øjeblikket er der også andre teknikker såsom: maleriet på glas, animationen af ​​sand, skærmen af ​​gujas og maleriet på celluloid. 

Hvad er CSS?

Nu hvor du ved lidt mere om animationernes verden, er det tid til, at vi introducerer dig til CSS-akronymernes verden.

stande CSS, se "cascading style sheets". Det er dannet af et sprog, der bruges i designsektoren og i præsentationen af ​​websider, endnu bedre, de er en række værktøjer og kommandoer, der er ansvarlige for at præsentere en webside, som vi ser den for første gang én gang den er allerede oprettet. Arbejder sammen med værktøjet HTML (organiseret ud fra sidernes basisindhold).

Dens navn bestemmes af antallet af ark, den indeholder, og et af dem arver egenskaber eller karakteristika fra andre. Det vil sige, at du kan arbejde med en simpel blogskabelon, men når du vil tilpasse udseendet af et websted, skal du implementere CSS, der sammen med et godt CMS vil hjælpe dig med at øge rækkevidden af ​​dit indhold.

Hvad er CSS til?

Med CSS kan du organisere din side, det vil sige, at du kan fortælle din webside, hvordan du vil lokalisere al information, så seeren er nem at håndtere og anvendelig på samme tid. Her skal du indtaste alle kommandoerne for nogle elementer, der er en del af stilen eller designet af websiden, for eksempel skrifttyper, farver, størrelser mm. 

Normalt, så du bedre forstår, hvad dette værktøj handler om, er digital marketing specialister de første til at forstå dette, da det er dem, der håndterer dem.

Animer i CSS

Nå, nu hvor du ved lidt om verden af ​​animationer og CSS. Det er tid til at starte selvstudiet.

CSS-animationer giver dig mulighed for at animere overgangen mellem en CSS-stil og en anden. Disse animationer består af to komponenter: a stil som beskriver CSS-animation og et sæt af rammer der angiver dens begyndelses- og sluttilstand samt mulige mellempunkter i den.

Hver af disse animationer har en række fordele:

• Dens brug er meget let til simple animationer, du kan gøre det selv uden at have kendskab til Javascript.
• Animation vises korrekt, selv på computere med lavt strømforbrug.
• Ved at blive kontrolleret af en browser, giver det mulighed for at optimere dens ydeevne og effektivitet, hvilket reducerer frekvensen og udfører fanerne på en sådan måde, at de ikke er synlige.

Animationsindstillinger

For at starte en animation skal vi først og fremmest konfigurere den. For at gøre dette går vi til ejendommen animation og til dets underejendomme. Dette værktøj giver os mulighed for at konfigurere både rytmen og varigheden af ​​animationen og ikke engang dens sekvens.

Underegenskaberne er:

animation - forsinkelse

Forsinkelsestid mellem det øjeblik, elementet indlæses og begyndelsen af ​​animationssekvensen.

animation - retning

Angiver, om animationen skal spole tilbage til startrammen i slutningen af ​​sekvensen, eller om den skal starte fra begyndelsen til slutningen.

animation - varighed

Angiver den tid, det tager animationen at fuldføre sin cyklus (varigheden)

animation - iteration - tælle

Antallet af gange det gentages. Vi kan indikere uendelig for at gentage animationen på ubestemt tid.

animation - navn

Det bruges til at angive navnet, der beskriver hver af animationens frames.

animation - leg - tilstand

Giver dig mulighed for at pause og genoptage animationssekvensen.

animation - timing-funktion

Det angiver animationens rytme, det vil sige hvordan animationsrammerne vises, for dette etableres accelerationskurver.

animation - fyld - tilstand

Angiver hvilke værdier egenskaberne vil have efter animationen slutter.

Indstil sekvensen med rammer

Når vi har konfigureret tiden, nomenklaturen osv. Det er tid til at give vores animation et look eller en følelse.

For at gøre dette vil vi etablere to nye rammer og bruge reglen @keyframes. Hermed beskriver hver frame, hvordan hvert element findes under animationssekvensen.

For at angive tid og rytme, rammen bruger procentdel og fra og tilTakket være dette kan vi angive, hvornår begyndelsen finder sted med 0% og slutningen med 100%.

Ramme- og tekstanimation

For at tilføje flere rammer og animere dem med tekst, skal du anvende en større størrelse på sidehovedskrifttypen, så overskriften øges, når den bevæger sig i et bestemt tidsrum, og derefter reduceres til dens oprindelige størrelse. Til dette vil vi etablere følgende kode:

75% skrifttype - størrelse: 300%; margen - venstre: 25%; bredde: 150%;

Med denne kode foreslår vi browseren, at overskriften i 75 % af sekvensen har en venstre margin på 25 % og en størrelse på 200 % med en bredde på 150 %.

Gentagelse af animation

For at gentage en animation er det nødvendigt at bruge følgende egenskab animation - iteration - tælle og vi skal angive, hvor mange gange vi ønsker, at det skal gentages. Vi kan også bruge uendelig så det hele tiden gentages.

Konklusion

Som du har set, kan du i CSS oprette animerede projekter, og du kan indtaste det ved at følge de trin, vi har givet dig. Hvis du fortsætter med at spørge og informere dig selv, vil du opdage, at der er mange muligheder for os.

Har du turdet allerede?