Animacions a CSS

Css presentació

Font: Programa en línia

Hi ha molts programes on editar, crear muntatges o fins i tot crear animacions, cada cop són molts els programaris que se sumen aquest tipus de projectes interactius. En aquest post no només t'introduirem al món de les animacions, sinó que a més, et presentarem a un nou amic.

Com bé sabràs, el món de la informàtica està ple d'ordres i d'eines útils per al desenvolupament de pàgines web o mitjans en línia, que conviuen actualment. Queda't amb nosaltres i descobreix en aquest nou tutorial una altra de les maneres d'augmentar el teu nivell amb la informàtica i la interactivitat.

Què són les animacions?

El món de les animacions

Font: Totes gamers

Volem que t'introdueixis per complet al tutorial, però per això, cal introduir-te al món de les animacions o el que en disseny gràfic es refereix, el món del disseny interactiu. 

Les animacions també formen part del món audiovisual, de fet no serien res si o fos perquè s'hi introdueix un àudio i una imatge en moviment. Per això, quan parlem d'«animació», ens referim a allò que coneixem popularment com a «dibuixos animats».

Com hem resumit anteriorment, l'animació sorgeix de la capacitat de donar moviment a alguna cosa, en aquest cas dibuixos animats. Però com s'aconsegueixen tots aquests moviments?, doncs sens dubte, sorgeixen del que anomenem, seqüències de dibuixos o fotografies que en estar ordenades consecutivament, una darrere l'altra, aconsegueixen generar un moviment creïble davant dels nostres ulls, els quals es presten i entren en el joc de la il·lusió visual.

Antigament, les primeres animacions es dissenyaven en fulls de paper, en cadascuna d'elles, es dibuixava el personatge animat fent passos, i una vegada que s'arribava al final del full, es passava una per una ràpidament per donar aconseguir l'efecte de moviment al dibuix.

Tipus d'animació

Hi ha diferents tipus d'animació:

Dibuixos Animats o Animació Tradicional

Aquest estil consisteix a donar moviment al protagonista en fotograma a fotograma. Al principi, quan no existien els mitjans audiovisuals suficients, es realitzaven a través del dibuixat i pintat de cada quadre (inclòs el fons, escenari o background de l'animació), per després ser filmat en el que coneixem com una cinta de pel·lícula.

Stop motion

L'Stop Motion és una tècnica d'animació que no té res a veure amb el dibuix animat. És més, el seu principal objectiu, és simular els moviments d'objectes que en la realitat, es troben totalment estàtics i es divideix en dues fases: animació de plastilina o claymotion i animació d'objectes rígids.

Pixelació

La pixelació és una tècnica que procedeix de l'Stop Motion i consisteix a treballar amb objectes que no són ni ninos ni maquetes, sinó objectes comuns o persones. Els objectes es fotografien diverses vegades i es desplacen lleugerament a cada fotograma.

Rotoscòpia

Consisteix en el dibuix directe d'un altre dibuix, com podria ser el calc d'un dibuix sobre un altre dibuix o una persona real. És considereu un precursor del mocap, és a dir, a la captura de moviment que s'empra per recrear personatges digitals en el món del cinema.

Animació per Retalls o Cut out Animation

És una tècnica que consisteix en la retallada de figures, aquestes figures poden estar representades en paper o en fotografies. El cos dels personatges es construeix amb retallades i el moviment i l'animació sorgeixen d'un reemplaçament d'aquests cossos retallats.

animació 3D

L'animació en 3D s'origina a partir d'un programa editor, que permet fer simulacions i animacions. Dins aquestes dues variants entren en contacte, una bona il·luminació, moviments de càmera i efectes especials.

Actualment també hi ha altres tècniques com per exemple: la pintura sobre vidre, l'animació de sorra, la pantalla de agulles i la pintura sobre cel·luloide. 

Què és CSS?

Css interfície d'un programa

Font: Disseny Web Rosario Session Studio

Ara que ja coneixes una mica més sobre el món de les animacions, és hora que t'introduïm al món de les sigles CSS.

les sigles CSS, fan referència a «fulls d'estil en cascada». Està formada per un llenguatge que s'empra en el sector del disseny i en la presentació de pàgines web, perquè o entenguis millor, són una sèrie d'eines i ordres que s'encarreguen de presentar una pàgina web tal com la veiem nosaltres per primera vegada una vegada que ja ha estat creada. Funciona juntament amb l'eina HTML (organitzats del contingut base de les pàgines).

El seu nom ve determinat, per la quantitat de fulles que conté i una de totes hereta propietats o característiques d'altres. És a dir, pots treballar amb una simple plantilla de bloc, però quan vulguis personalitzar l'aparença d'un lloc necessitareu implementar CSS que en conjunt amb un bon CMS us ajudarà a potenciar l'abast del vostre contingut.

Per què serveix CSS?

Amb CSS, pots organitzar la teva pàgina, és a dir pots indicar-li a la teva pàgina web com voleu ubicar tota la informació de manera que a l'espectador li sigui fàcil de manejar i útil alhora. Aquí entren totes les ordres d'alguns elements que formen part de l'estil o del disseny de la pàgina web, per exemple, les fonts, els colors, les mides etc. 

Normalment, perquè entenguis millor que va aquesta eina, els especialistes en màrqueting digital, són els primers que deuen entendre sobre això ja que són els que les manegen.

Animar a CSS

Doncs bé, ara que coneixes una mica el món de les animacions i de CSS. És hora de començar amb el tutorial.

Les animacions CSS permeten animar la transició entre un estil CSS i un altre. Aquestes animacions consten de dos components: un estil que descriu l'animació CSS ​​i un conjunt de fotogrames que indiquen el seu estat inicial i final, així com possibles punts intermedis.

Cadascuna d'aquestes animacions té una sèrie d'avantatges:

  • El seu ús és molt fàcil per a animacions senzilles, pots fer-ho fins i tot sense tenir coneixements de Javascript.
  • L'animació es mostra correctament fins i tot en equips poc potents.
  • En estar controlat per un navegador, permet optimitzar-ne el rendiment i l'eficàcia, d'aquesta manera es redueix la freqüència i les pestanyes s'executen de manera que no es troben visibles.

Configuració de l´animació

Per començar una animació, primer de tot haurem de configurar-la. Per això, ens dirigirem a la propietat animació i als seus sub- propietats. Aquesta eina ens permetrà configurar tant el ritme com la durada de l'animació i fins i tot la seva seqüència.

Les sub- propietats són:

animation – delay

Temps de retard entre el moment en què l'element es carrega i el començament de la seqüència de l'animació.

animation – direction

Indica si l'animació ha de retrocedir fins al fotograma d'inici en finalitzar la seqüència o si ha de començar des del principi en arribar al final.

animation – duration

Indica la quantitat de temps que consumeix l'animació a completar el seu cicle (la durada)

animation – iteration – count

El nombre de vegades que es repeteix. Podem indicar infinit per repetir l'animació indefinidament.

animation – name

Serveix per especificar el nom que descriu cadascun dels fotogrames d'animació.

animation – play – state

Permet poder pausar i reprendre la seqüència de l´animació.

animation – timing- function

Indica el ritme de l'animació, és a dir, com es mostren els fotogrames de l'animació, per això s'estableixen corbes d'acceleració.

animation – fill – mode

Especifica quins valors tindran les propietats després de finalitzar l'animació.

Configurar la seqüència amb fotogrames

Quan hem configurat el temps, la nomenclatura etc. És hora d'oferir una aparença o un aspecte a la nostra animació.

Per això, establirem dos nous fotogrames i emprarem la regla @keyframes. Amb això, cada fotograma descriu com es troba cada element durant la seqüència d'animació.

Per indicar el temps i el ritme, el fotograma empra percentatge i amb from i togràcies a això, podem indicar en quin moment té lloc el principi amb un 0% i el final amb un 100%.

Animació de fotogrames i textos

Per afegir més fotogrames i animar-los amb text, cal aplicar una mida superior de la font de la capçalera perquè aquest, augmenti a mesura que es mou durant un temps establert i que després, seguidament disminueixi a la seva mida original. Per això establirem el codi següent:

75% font - size : 300%; margn - left: 25%; width: 150%;

Amb aquest codi, us suggerim al navegador que en el 75% de la seqüència, l'encapçalament té un marge esquerre del 25% i una mida de 200% amb una amplada de 150%.

Repetició de l´animació

Per fer que una animació es repeteixi, cal emprar la següent propietat animation – iteration – count i li hem d'indicar quantes vegades volem que es repeteixi. També podem emprar infinit perquè es repeteixi sempre.

Conclusió

Com has pogut observar, a CSS pots crear projectes animats i pots introduir-hi els passos que t'hem fet. Si continues indagant i informant-te, descobriràs que són moltes les opcions que es troben al nostre abast.

T'has atrevit ja?


Sigues el primer a comentar

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.