Exemples d'animacions CSS

El món de les animacions és cada dia més present, són molts els programes que ens ajuden a crear minucioses edicions de vídeo. Si encara no coneixes CSS, ha arribat el moment que comencis a familiaritzar-te amb ell i descobreixis tot el que es pot fer.

Però com que no volem esplaiar-nos, et portem un post recarregat d'animacions, moltes compleixen alguna funció determinada, d'altres simplement s'han dissenyat per entretenir i divertir. En aquest post, et mostrem algunes de les millors animacions de CSS ia més, us mostrem altres programes d'interès on podreu continuar el vostre viatge com a dissenyador o dissenyadora d'animacions.

CSS

CSS es defineix com una mena de recurs que sol estar molt emprat en sector del disseny de pàgines web. És a dir, és una sèrie de codis que es dissenyen perquè es compleixin determinades funcions. Si coneixes el terme HTML, segur que coneixeràs el terme CSS, ja que van de la mà i totes dues són dos pilars fonamentals en la creació i el desenvolupament de molts altres recursos d'internet.

Perquè ho entenguis millor, hi ha plantilles ja dissenyades on pots començar a editar-les i així crear la teva pròpia pàgina web. Però si el que vols és modificar adreces d'enllaços o el link de la teva pàgina, caldrà utilitzar alguns codis que tot programador o programadora deu conèixer.

Característiques generals

• Encara que a primera vista sembli que HTML i CSS són el mateix, no ho són. Amb HTML pots reconduir i distribuir la informació que necessitis o desitgis de la teva pàgina web. En canvi, amb CSS, el que permetes és l'ordre de cadascuna de les pàgines que estàs dissenyant. No són el mateix però com s'ha esmentat anteriorment, totes dues són dos pilars fonamentals en el desenvolupament de pàgines web.
• El que és característic de CSS és que es pot emprar en molts navegadors, no té cap patró establert, sinó que el seu llenguatge és universal i apte també per a tots els dispositius disponibles. Això facilita la feina ja que no es necessita cap tipus d'extensió ni molt menys un programador.
• Com s'ha especificat també, és una bona eina si el que vols dissenyar i així modificar o canviar qualsevol aspecte de la interfície de la teva pàgina web. Això deriva tant de tipografies com de tonalitats, és a dir, tens un ventall ampli de possibilitats.
• És fàcil de manejar i hi ha codis preestablerts per començar amb el món del desenvolupament d'aquest tipus de formats, són anys de pràctica però CSS compta amb una base inicial on pots crear la teva primera animació i sentir-te tot un i una professional del disseny de pàgines web. A més, és un sistema que està obert a tothom que vulgui començar a desenvolupar els seus primers projectes. En definitiva, si el que busques és anar més enllà d'una plantilla o d'un creador de pàgines web automàtic, amb el CSS pots començar la teva aventura.

Exemples d´animacions

Dodecaedre

Dodecaedro és una animació creada per l'animador Wontem. L'animació parteix de la base de ser creada completament a través de CSS on es mostra el disseny d'un dodecaedre giratori sobre un fons fosc que en reforça la lluminositat. Un altre detall que cal tenir en compte són els efectes que ha aplicat a la figura.

El que més caracteritza aquesta animació és que té certa tendència a ser un disseny tridimensional, cosa que encara és molt més interessant. És sens dubte una excel·lent animació si el que tagrada és el món 3D i jugar el volum dels objectes.

Follet animat

Aquesta animació es titula follet animat i ha estat creada pel dissenyador Avaz Bokiev, sens dubte és una petita seqüència on ha emprat un dels protagonistes estrella de l'era dels videojocs, Mario Bros.

És un estil d'animació que es coneix com a stop – motion ja que juga amb el moviment direccional a través de petites seqüències. Sens dubte, és una animació estrella que es porta tot el reconeixement si ets amant de Mario Bros. És una de les millors animacions creades a CSS.

càmera fotogràfica

Aquesta excel·lent animació ofereix protagonisme a una càmera fotogràfica animada. És una animació creada per Damiem Pereira i permet que la càmera simuli la captura d'una imatge amb només prémer el botó. És una animació interessant si t'agrada el món de la fotografia i necessites una secció a la teva pàgina web igual d'animada que aquesta.

L'interessant d'aquesta animació és que podeu posar la imatge que vulgueu i la càmera la mostrarà quan premeu el botó. És sens dubte una de les animacions més creatives dissenyada a CSS.

Sistema solar en forma de cascada

Aquesta animació sobre el sistema solar ha estat creada per Tady Walsh, on mostra una petita maqueta o simulació del nostre sistema solar. És una animació excel·lent ja que pots observar com es mouen cadascun dels planetes a diferents velocitats. 

És una de les animacions més realistes i més sorprenents. Et pot resultar interessant si et dediques al món de l'astronomia o ets fanàtic o fanàtica de l'univers i els seus planetes. És definitiva, és una animació que s'emporta el premi com una de les millors i sorprenents.

Star Wars animació

Si t'agrada Star Wars, no et pots perdre aquesta animació creada per Donovan Hutchinson. És sens dubte una animació amb efectes especials del titular de la famosa saga Star Wars. El que és sorprenent d'aquesta animació és com ha jugat amb el moviment de les diferents tipografies.

És sens dubte una de les animacions estrella ja que ha tingut en compte tots i cadascun dels elements ficticis que la saga ofereix: galàxies, llums LED, fons foscos i tipografies cridaneres.

A més, els efectes de moviment també estan força encertats i criden molt l'atenció de l'espectador.

Aplicacions per crear animacions

Adobe Spark

Adobe Spark és una eina que forma part d'Adobe i s'encarrega de crear animacions sorprenents i fer així una infinitat de vídeos animats i divertits. El que crida latenció daquesta eina i és sens dubte un punt a favor, és que està disponible per a dispositius mòbils, tauletes i ordinadors. A més, si busques crear contingut de qualitat per a la teva pàgina web, és l'eina perfecta, ja que compta amb milers de plantilles decoratives perquè converteixis el teu espai, en un lloc atractiu de visitar.

Taula d'animació

És una de les aplicacions estrella si ets il·lustrador i encara no saps com donar-li vida als teus dibuixos, gràcies a aquesta eina, podràs fer un gir als teus projectes artístics ia més, podràs fer-hi tots i cadascun dels teus dibuixos. Doncs compta amb una paqueteria completa de pinzells, llapis de diferents puntes, una gamma de colors força àmplia i també tens l'opció de realitzar els teus primers esbossos previs, és sens dubte el que necessitaves per començar amb el món de l'animació a través dels teus pròpies obres. Prova-la i no en quedis amb les ganes.

Estudi Synfig

Synfig, és un dels millors programes per crear animacions en 2D. És una de les eines clau si us agrada el món de l'animació al més pur estil Disney. Amb Synfig, tens també una paqueteria àmplia de pinzells, filtres i fins i tot efectes que pots aplicar als teus dibuixos.

A més, si ets fan del 2D no pots deixar escapar l'ocasió de provar aquest tipus de programes, ja que ofereixen la possibilitat de poder donar moviment i vida a les teves il·lustracions. Si has treballat amb vectors anteriorment, aleshores aquest programa no et resultarà diferent ni complicat.

Premiere Pro

Premiere Pro és una altra de les eines clau de la paqueteria d'Adobe. És un dels programes més utilitzats per editors de vídeo professionals i per molts estudis d'animació. Amb Premiere pots crear les teves primeres animacions i deixar-te endur entre els molts efectes que conté.

A més, si ets principiant al sector audiovisual, compta amb uns petits tutorials per introduir-te a la seva interfície i que et deixis portar per la imaginació i el teu costat més creatiu.

Es troba disponible tant per a Android i iOS. Lúnic inconvenient és que no és una aplicació gratuïta, requereix un petit cost.

Conclusió

Crear animacions a CSS és molt senzill, només n'hi ha prou d'aprendre i inspirar-te de qui porten anys en aquest sector. Com has pogut comprovar, són moltes les animacions que existeixen, a més hi ha altres dissenyadors que empren recursos molt més funcionals, com per exemple el disseny de les famoses escombraries de Windows en forma d'avioneta on es mou per tot l'escriptori i elimina allò que no desitges.

En definitiva, són moltes les idees i genialitats que s'han dissenyat, però ara et toca començar a programar i desenvolupar les teves primeres animacions amb CSS.