Animacions amb CSS

Les animacions en CSS ens permeten crear efectes visuals dinàmics i atractius sense necessitat de JavaScript. Amb la propietat animation i la regla @keyframes, podem definir i aplicar comportaments animats que alteren les propietats d’un element al llarg del temps.

Regla `@keyframes`

La regla @keyframes defineix els estats clau d’una animació, especificant com canvien les propietats CSS en moments concrets. Cada estat clau representa un conjunt de propietats i els seus valors en un moment determinat.

Funcionament

Definició del nom: Cada animació necessita un nom únic.
Estats clau (from, to o percentatges):
- from: Estat inicial (equivalent a 0%).
- to: Estat final (equivalent a 100%).
- Percentatges (0%, 50%, 100%) per definir passos intermedis.

Exemple:

/* Definim l'animació "exemple" */
@keyframes exemple {
  from { /* Estat inicial: invisible */
    opacity: 0;
  }
  to { /* Estat final: visible */
    opacity: 1;
  }
}

En l’exemple, l’element passa d’una opacitat de 0 (invisible) a 1 (completament visible).

Propietat `animation`

La propietat animation aplica les animacions definides amb @keyframes als elements seleccionats.

Sintaxi:

animation: <nom-animacio> <duracio> <funcio-temporitzacio> <retard> <iteracions> <direccio> <mode-final> <estat-joc>;

Exemple explicat:

.element {
  animation: fadeIn 2s ease-in-out 1s infinite alternate;
  /* fadeIn: Nom de l'animació definida amb @keyframes */
  /* 2s: Durada de l'animació (2 segons) */
  /* ease-in-out: Transició suau al principi i al final */
  /* 1s: Retard abans de començar l'animació */
  /* infinite: L'animació es repeteix indefinidament */
  /* alternate: Alterna entre els estats inicial i final */
}

Propietats individuals d’`animation`

Propietat	Descripció	Valors possibles
`animation-name`	Nom de l’animació definida amb `@keyframes`.	Nom de l’animació o `none` si no hi ha cap animació.
`animation-duration`	Temps que dura l’animació (en segons o mil·lisegons).	Temps (ex. `2s`, `500ms`).
`animation-timing-function`	Defineix la velocitat de l’animació.	`ease` (per defecte), `linear`, `ease-in`, `ease-out`, `ease-in-out`, funcions personalitzades (`cubic-bezier`).
`animation-delay`	Temps d’espera abans de començar l’animació.	Temps (ex. `1s`, `250ms`).
`animation-iteration-count`	Nombre de vegades que es repeteix l’animació.	Nombre enter (ex. `1`, `3`) o `infinite`.
`animation-direction`	Direcció de l’animació.	`normal`, `reverse`, `alternate`, `alternate-reverse`.
`animation-fill-mode`	Com es comporta l’element abans o després de l’animació.	`none` (per defecte), `forwards`, `backwards`, `both`.
`animation-play-state`	Pausa o reprèn l’animació.	`running`, `paused`.

Valors que pot poden pendre les propietats

animation-timing-function:
- ease: Suau al principi i al final (per defecte).
- linear: Velocitat constant.
- ease-in: Comença suau i accelera.
- ease-out: Comença ràpid i acaba suau.
- ease-in-out: Suau al principi i al final.
- cubic-bezier(x1, y1, x2, y2): Funció personalitzada.
animation-direction:
- normal: Executa l’animació des de l’inici fins al final.
- reverse: Executa l’animació des del final fins a l’inici.
- alternate: Alterna entre normal i reverse.
- alternate-reverse: Alterna començant pel reverse.
animation-fill-mode:
- none: L’animació no afecta l’element fora de la durada.
- forwards: L’element manté l’estat final de l’animació.
- backwards: L’element assumeix l’estat inicial durant el retard.
- both: Combina forwards i backwards.
animation-iteration-count:
- Qualsevol número enter positiu (ex. 1, 3).
- infinite: L’animació es repeteix indefinidament.

Exemple:

Definim l’animació amb @keyframes:

/* L'element es mou 100px cap a la dreta */
@keyframes move {
  from { /* Estat inicial: posició original */
    transform: translateX(0);
  }
  to { /* Estat final: 100px a la dreta */
    transform: translateX(100px);
  }
}

Apliquem l’animació a un element:

.element {
  animation: move 3s ease-in-out infinite alternate;
  /* move: Nom de l'animació definida amb @keyframes */
  /* 3s: Durada de l'animació (3 segons) */
  /* ease-in-out: Transició suau al principi i al final */
  /* infinite: L'animació es repeteix indefinidament */
  /* alternate: Alterna entre els estats inicial i final */
}

En aquest exemple, l’element es mourà 100px cap a la dreta i després tornarà a la seva posició inicial, repetint-ho indefinidament amb una transició suau.

Ús combinat de `@keyframes` i `animation`

Per crear i aplicar una animació amb CSS, seguim dos passos principals: definir l’animació amb @keyframes i aplicar-la a un element amb la propietat animation.

1. Definim l’animació amb @keyframes:

Amb @keyframes, especifiquem els estats inicials i finals (o intermedis) de l’animació:

@keyframes move {
  from { 
    transform: translateX(0); /* Estat inicial: sense desplaçament */
  }
  to { 
    transform: translateX(100px); /* Estat final: desplaçament de 100px cap a la dreta */
  }
}

Explicació:

from: Defineix l’estat inicial de l’element (aquí, sense desplaçament).
to: Defineix l’estat final de l’element (desplaçat 100px cap a la dreta).

2. Apliquem l’animació a un element amb animation:

Utilitzem la propietat animation per associar l’animació definida amb l’element desitjat:

.element {
  animation: move 3s ease-in-out infinite alternate;
  /* move: Nom de l'animació definida amb @keyframes */
  /* 3s: Durada de l'animació (3 segons) */
  /* ease-in-out: Transició suau al principi i al final */
  /* infinite: L'animació es repeteix indefinidament */
  /* alternate: Alterna entre els estats inicial i final */
}

Comportament resultant:
L’element es desplaçarà 100px cap a la dreta en 3 segons.
El moviment seguirà una transició suau, començant lentament, accelerant i finalitzant suaument (ease-in-out).
L’animació es repetirà indefinidament i alternarà entre el desplaçament cap a la dreta i el retorn a la posició original (alternate).

Amb aquesta combinació de @keyframes i animation, podem crear efectes visuals elegants i dinàmics de manera senzilla.

Exemples d’animacions

1. Animació de desplaçament horitzontal: moure

Nom de l’animació: moure.
Aquesta animació desplaça un element horitzontalment 100px cap a la dreta i torna al seu punt d’origen.

/* Definim l'animació de desplaçament */
@keyframes moure {
  from {
    transform: translateX(0); /* Estat inicial: sense desplaçament */
  }
  to {
    transform: translateX(100px); /* Estat final: 100px cap a la dreta */
  }
}

/* Apliquem l'animació a un element */
.element {
  animation: moure 2s ease-in-out infinite alternate;
  /* moure: Nom de l'animació */
  /* 2s: Durada de l'animació (2 segons) */
  /* ease-in-out: Suau al principi i al final */
  /* infinite: Repetició infinita */
  /* alternate: Alterna entre els estats inicial i final */
}

2. Animació de canvi de color: canviColor

Nom de l’animació: canviColor.
Fa que el text d’un element alterne entre roig i blau de manera infinita.

/* Definim l'animació de canvi de color */
@keyframes canviColor {
  from {
    color: red; /* Estat inicial: text de color roig */
  }
  to {
    color: blue; /* Estat final: text de color blau */
  }
}

/* Apliquem l'animació a un element */
.element {
  animation: canviColor 2s infinite alternate;
  /* canviColor: Nom de l'animació */
  /* 2s: Durada d'una alternança de color (2 segons) */
  /* infinite: Repetició infinita */
  /* alternate: Alterna entre roig i blau */
}

3. Animació de canvi de color de fons: canviFons

Nom de l’animació: canviFons.
El color de fons passa successivament de roig a groc i després a blau.

/* Definim l'animació del color de fons */
@keyframes canviFons {
  0% {
    background-color: red; /* Color inicial: roig */
  }
  50% {
    background-color: yellow; /* Color intermedi: groc */
  }
  100% {
    background-color: blue; /* Color final: blau */
  }
}

/* Apliquem l'animació a un element */
.element {
  animation: canviFons 3s infinite;
  /* canviFons: Nom de l'animació */
  /* 3s: Durada completa del cicle (3 segons) */
  /* infinite: Repetició infinita */
}

4. Animació de rotació: rotar

Nom de l’animació: rotar.
Fa girar un element completant una volta de 360 graus de manera contínua.

/* Definim l'animació de rotació */
@keyframes rotar {
  from {
    transform: rotate(0); /* Estat inicial: sense rotació */
  }
  to {
    transform: rotate(360deg); /* Estat final: volta completa de 360 graus */
  }
}

/* Apliquem l'animació a un element */
.element {
  animation: rotar 2s linear infinite;
  /* rotar: Nom de l'animació */
  /* 2s: Durada d'una volta completa (2 segons) */
  /* linear: Velocitat constant durant tota la rotació */
  /* infinite: Repetició infinita */
}

5. Animació de desplaçament amb estats intermedis: moure

Nom de l’animació: moure.
Desplaça un element horitzontalment amb un moviment d’anada i tornada.

/* Definim l'animació amb estats intermedis */
@keyframes moure {
  0% {
    transform: translateX(0); /* Estat inicial: posició original */
  }
  50% {
    transform: translateX(100px); /* Punt intermedi: 100px cap a la dreta */
  }
  100% {
    transform: translateX(0); /* Estat final: tornada a la posició inicial */
  }
}

/* Apliquem l'animació a un element */
.element {
  animation: moure 3s ease-in-out infinite;
  /* moure: Nom de l'animació */
  /* 3s: Durada completa del moviment (3 segons) */
  /* ease-in-out: Moviment suau d'anada i tornada */
  /* infinite: Repetició infinita */
}

6. Animació d’opacitat: fondre

Nom de l’animació: fondre.
Fa que un element alterne entre completament visible i semiopac.

/* Definim l'animació d'opacitat */
@keyframes fondre {
  from {
    opacity: 1; /* Estat inicial: completament visible */
  }
  to {
    opacity: 0.5; /* Estat final: semiopac */
  }
}

/* Apliquem l'animació a un element */
.element {
  animation: fondre 2s infinite alternate;
  /* fondre: Nom de l'animació */
  /* 2s: Durada d'una alternança d'opacitat (2 segons) */
  /* infinite: Repetició infinita */
  /* alternate: Alterna entre completament visible i semiopac */
}

7. Animació de canvi de mida: redimensionar

Nom de l’animació: redimensionar.
Augmenta i redueix la mida d’un element amb suavitat.

/* Definim l'animació de redimensionament */
@keyframes redimensionar {
  from {
    transform: scale(1); /* Estat inicial: mida original */
  }
  to {
    transform: scale(1.5); /* Estat final: augmenta un 50% */
  }
}

/* Apliquem l'animació a un element */
.element {
  animation: redimensionar 2s ease-in-out infinite alternate;
  /* redimensionar: Nom de l'animació */
  /* 2s: Durada del canvi de mida (2 segons) */
  /* ease-in-out: Transició suau al principi i al final */
  /* infinite: Repetició infinita */
  /* alternate: Alterna entre augmentar i tornar a la mida original */
}

Animacions amb pseudoclases, pseudoelements i propietats CSS

Les pseudoclases i pseudoelements són eines potents per crear interactivitat i animacions. Permeten aplicar efectes quan es produeixen esdeveniments específics, com passar el ratolí sobre un element (:hover) o modificar el contingut abans/després d’un element (:before/:after).

Exemple genèric d’ús: Pseudoclases per a animacions

.element:hover {
  animation: exampleEffect 0.5s ease-in-out;
  /* exampleEffect: Nom de l'animació */
  /* 0.5s: Durada de l'animació */
  /* ease-in-out: Transició suau al principi i al final */
}

@keyframes exampleEffect {
  from {
    transform: scale(1); /* Estat inicial: mida original */
  }
  to {
    transform: scale(1.1); /* Estat final: augmenta lleugerament la mida */
  }
}

:hover: Activa l’animació quan el ratolí passa per damunt de l’element.
L’animació augmenta lleugerament la mida de l’element durant mig segon.

Taula resum de propietats i pseudoclases

Propietat/Pseudoclasse	Descripció	Exemple d’ús
`:hover`	Activa animacions quan el ratolí passa per damunt de l’element.	Augmentar la mida o canviar el color d’un element.
`:focus`	Activa animacions quan un element rep el focus (inputs o botons).	Ressaltar un camp d’entrada seleccionat.
`:active`	Activa animacions mentre l’element està sent clicat.	Reduir la mida d’un botó temporalment.
`:checked`	Activa animacions quan un checkbox o radio està seleccionat.	Canviar el color d’un text associat a un checkbox marcat.
`:disabled`	Aplica estils a elements deshabilitats.	Reduir l’opacitat d’un botó deshabilitat.
`:nth-child()`	Aplica estils basats en la posició d’un element dins del seu contenidor.	Canviar el color de files imparells d’una taula.
`:before` / `:after`	Crea continguts animats abans o després d’un element.	Afegir una decoració animada a un botó.
`animation`	Defineix animacions completes i automàtiques.	Crear efectes de rebot o desplaçament.
`transition`	Defineix transicions suaus entre estats d’estil.	Canviar l’opacitat d’un element en passar el ratolí.

Regles `@media` i `@supports`

Les regles @media i @supports en CSS ens permeten aplicar estils condicionalment, ja siga adaptant-los a les característiques del dispositiu o comprovant la compatibilitat amb certes propietats. Són essencials per aconseguir dissenys responsius i assegurar la consistència visual en diferents navegadors i dispositius.

`@media`: Estils adaptatius segons condicions del dispositiu

La regla @media aplica estils només si es compleixen determinades condicions del dispositiu, com la mida de la pantalla, l’orientació o la resolució. És un element fonamental en dissenys responsius.

Exemple bàsic: Mida de pantalla

body {
  font-size: 16px; /* Mida del text per defecte */
}

@media (max-width: 768px) {
  body {
    font-size: 14px; /* Text més menut per pantalles mitjanes */
  }
}

@media (max-width: 480px) {
  body {
    font-size: 12px; /* Text encara més menut per pantalles xicotetes */
  }
}

Pantalles grans (>768px): Mida del text de 16px.
Pantalles mitjanes (≤768px): Text redimensionat a 14px.
Pantalles xicotetes (≤480px): Text redimensionat a 12px.

Altres usos de la regla `@media`

Orientació del dispositiu:

@media (orientation: landscape) {
  body {
    background-color: lightblue; /* Fons blau per orientació horitzontal */
  }
}

@media (orientation: portrait) {
  body {
    background-color: lightgreen; /* Fons verd per orientació vertical */
  }
}

landscape: Quan el dispositiu està en mode horitzontal.
portrait: Quan el dispositiu està en mode vertical.

Resolució del dispositiu:

@media (min-resolution: 300dpi) {
  img {
    border: 5px solid red; /* Bord vermell només en dispositius d'alta resolució */
  }
}

Aquest exemple aplica estils específics a dispositius amb una resolució mínima de 300dpi, com les pantalles Retina.

Exemple complet: Disseny responsiu amb `@media`

En aquest exemple es crea una distribució de columnes adaptable segons la mida de la pantalla:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columnes per defecte */
  gap: 20px; /* Separació entre columnes */
}

@media (max-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columnes per pantalles mitjanes */
  }
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr; /* 1 columna per pantalles menudes */
  }
}

Pantalles grans (>1024px): 4 columnes.
Pantalles mitjanes (≤1024px): 2 columnes.
Pantalles xicotetes (≤600px): 1 columna.

`@supports`: Comprovació de compatibilitat

La regla @supports permet verificar si el navegador admet una propietat CSS abans d’aplicar estils.

Exemple de compatibiltat amb grid

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Disseny en 3 columnes si es suporta grid */
  }
}

Si el navegador admet display: grid, s’aplica el disseny de columnes. Si no, es poden definir estils alternatius fora de la regla.

Fonts

1. Incorporar Fonts locals

Per poder utilitzar fonts descarregades directament al nostre projecte, hem de realitzar els següents passos.

Descarregar la font:
Per a que funcione en tots els navegadors, ens hem d’assegurar de tindre els fitxers en diversos formats per garantir compatibilitat amb tots ells. Els formats que podem trobar són:
- .woff2: Format modern, més eficient i lleuger.
- .woff: Lleuger i àmpliament suportat.
- .ttf: Format TrueType, universalment compatible.
- .otf: Format OpenType, amb característiques tipogràfiques avançades.
- .eot: Necessari només per a navegadors antics com Internet Explorer 8.(Deprecated)

Organitzar els fitxers:

Esl fitxers de la font els hem de colocar en una carpeta del projecte.

Exemple:

📂 assets
 ┗ 📂 fonts
    ┗ custom-font.woff2
    ┗ custom-font.woff
    ┗ custom-font.ttf
    ┗ custom-font.otf
    ┗ custom-font.eot

Defineir la font en el CSS amb @font-face:

(Sols posarem les línies de codi dels arxius que tingam descarregats)

   @font-face {
       font-family: 'CustomFont'; /* Nom personalitzat per identificar la font */
       src: url('assets/fonts/custom-font.eot'); /* Format antic (necessari per a IE8 i versions anteriors) */
       src: url('assets/fonts/custom-font.eot?#iefix') format('embedded-opentype'), /* Fix específic per a IE */
            url('assets/fonts/custom-font.woff2') format('woff2'), /* Format modern i eficient */
            url('assets/fonts/custom-font.woff') format('woff'),   /* Format lleuger i compatible */
            url('assets/fonts/custom-font.ttf') format('truetype'), /* Format universalment compatible */
            url('assets/fonts/custom-font.otf') format('opentype'); /* Format amb característiques avançades */
       font-weight: normal; /* Pes de la font (exemple: normal, bold, etc.) */
       font-style: normal;  /* Estil de la font (exemple: normal, italic, etc.) */
   }

A l’anterior codi @font-face tenim:

font-family: 'CustomFont';
Defineix el nom de la font. Aquest nom serà utilitzat més endavant al CSS per aplicar la font al text.
src: url('assets/fonts/custom-font.eot');
Defineix la ruta al fitxer .eot. Aquest és un format antic per a compatibilitat amb Internet Explorer 8 i versions més antigues.
src: url('assets/fonts/custom-font.eot?#iefix') format('embedded-opentype'),
Fix específic per a Internet Explorer, indicant que el format és embedded-opentype.
url('assets/fonts/custom-font.woff2') format('woff2'),
Especifica el fitxer .woff2, un format modern i recomanat per la seua eficiència i suport en navegadors actuals.
url('assets/fonts/custom-font.woff') format('woff'),
Defineix el fitxer .woff, un format més antic però àmpliament compatible amb navegadors.
url('assets/fonts/custom-font.ttf') format('truetype'),
Utilitza el format .ttf, tradicionalment utilitzat per garantir compatibilitat universal.
url('assets/fonts/custom-font.otf') format('opentype');
Utilitza el format .otf, un format avançat que inclou característiques tipogràfiques com lligadures.

A banda de les configuracions dels arxius de la nostra font, **@font-face ens permet configurar dos atributs:**

font-weight: normal;
Indica el pes de la font. Valors possibles inclouen normal, bold, o valors numèrics com 100, 400, etc.
font-style: normal;
Defineix l’estil de la font. Pot ser normal, italic, o oblique.

Aplica la font al CSS:

body {
    font-family: 'CustomFont', sans-serif; /* Usa la font definida */
}

On:

'CustomFont': És el nom personalitzat que has definit amb @font-face.
sans-serif: És la font de reserva. Si el navegador no pot carregar CustomFont, utilitzarà una font sans-serif preinstal·lada al sistema.

2. Fonts allotjades al núvol

Google Fonts

Com seleccionar i generar l’enllaç:
- Visita Google Fonts.
- Selecciona una o més fonts fent clic al botó “+” al costat de cada font.
- Fes clic a la finestra inferior dreta (on apareixen les fonts seleccionades).
- Configura els pesos (ex. 400, 700) i estils (ex. italic).
- Copia el codi <link> generat.

Inclou el <link> al teu HTML:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Aplica la font al CSS:

body {
    font-family: 'Roboto', sans-serif;
}

Fontshare

Com seleccionar i generar l’enllaç:
- Visita Fontshare.
- Selecciona una font i fes clic a “Get CSS”.
- Copia el codi <link> generat.

Inclou el <link> al teu HTML:

<link href="https://api.fontshare.com/v2/css?family=General:wght@400;700&display=swap" rel="stylesheet">

Aplica la font al CSS:

body {
    font-family: 'General Sans', sans-serif;
}

Adobe Fonts

Com seleccionar i generar l’enllaç:
- Visita Adobe Fonts amb un compte Creative Cloud actiu.
- Selecciona fonts i crea un projecte nou.
- Copia el codi <link> proporcionat per Adobe Fonts.

Inclou el <link> al teu HTML:

<link rel="stylesheet" href="https://use.typekit.net/abcd1234.css">

Aplica la font al CSS:

body {
    font-family: 'Proxima Nova', sans-serif;
}

3. Fonts web-safe

Fonts universals disponibles en tots els sistemes operatius i navegadors. Aquestes fonts no necessiten cap configuració addicional.

Exemples pràctics per a cada tipus de font web-safe

1. Fonts sans-serif

body {
  font-family: Arial, Helvetica, sans-serif;
}

Explicació: Utilitza Arial com a font principal. Si no està disponible, passarà a Helvetica o, finalment, a qualsevol font sans-serif instal·lada.

2. Fonts serif

h1 {
 font-family: 'Times New Roman', Georgia, serif;
}

Explicació: Fa servir Times New Roman com a font principal, amb Georgia com a alternativa i qualsevol font serif per defecte si les anteriors no estan disponibles.

3. Fonts monospace

code {
  font-family: 'Courier New', monospace;
}

Explicació: Aplica Courier New per al codi, amb una font monospace de reserva si no es pot carregar.

Pàgines de Fonts

Exemple de Fonts Locals

A continuació tens un exemple complet que utilitza fonts locals amb els formats .ttf, .otf, i .woff. Les fonts es defineixen en el CSS amb @font-face i s’apliquen a diferents elements del projecte HTML.

HTML

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fonts locals</title>
    <!-- Enllaça l'arxiu CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1 class="font-ttf">Títol principal amb font .ttf</h1>
        <h2 class="font-otf">Subtítol amb font .otf</h2>
    </header>
    <main>
        <section>
            <p class="font-woff">Aquest paràgraf utilitza una font .woff.</p>
        </section>
    </main>
    <footer>
        <p>Fonts locals aplicades amb HTML i CSS.</p>
    </footer>
</body>
</html>

CSS

/* Defineix fonts locals amb @font-face */

/* Font amb format .ttf */
@font-face {
    font-family: 'CustomFontTTF'; /* Nom personalitzat per a la font */
    src: url('assets/fonts/custom-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Font amb format .otf */
@font-face {
    font-family: 'CustomFontOTF'; /* Nom personalitzat per a la font */
    src: url('assets/fonts/custom-font.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Font amb format .woff */
@font-face {
    font-family: 'CustomFontWOFF'; /* Nom personalitzat per a la font */
    src: url('assets/fonts/custom-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Aplica les fonts als elements */

/* Font .ttf */
.font-ttf {
    font-family: 'CustomFontTTF', sans-serif; /* Font local amb font de reserva */
    font-size: 24px;
    color: #333;
    text-align: center;
}

/* Font .otf */
.font-otf {
    font-family: 'CustomFontOTF', serif; /* Font local amb font de reserva */
    font-size: 20px;
    color: #555;
    text-align: center;
}

/* Font .woff */
.font-woff {
    font-family: 'CustomFontWOFF', sans-serif; /* Font local amb font de reserva */
    font-size: 18px;
    color: #777;
    text-align: justify;
}

Exmples de fonts al nuvol:

A continuació et mostraré un exemple complet on es treballa amb 2 fonts de Google Fonts, 2 fonts de Fontshare i 2 fonts d’Adobe Fonts, aplicades a un projecte HTML i CSS:

Exemple complet: HTML

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fonts combinades</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    
    <!-- Fontshare -->
    <link href="https://api.fontshare.com/v2/css?family=General:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://api.fontshare.com/v2/css?family=Clash:wght@400&display=swap" rel="stylesheet">
    
    <!-- Adobe Fonts -->
    <link rel="stylesheet" href="https://use.typekit.net/abcd1234.css">
</head>
<body>
    <header>
        <h1 class="google-font1">Encapçalament amb Roboto (Google Fonts)</h1>
        <h2 class="google-font2">Subtítol amb Montserrat (Google Fonts)</h2>
    </header>
    <main>
        <section>
            <p class="fontshare-font1">Paràgraf amb General Sans (Fontshare).</p>
            <p class="fontshare-font2">Text amb Clash Display (Fontshare).</p>
        </section>
        <section>
            <p class="adobe-font1">Aquest text utilitza Proxima Nova (Adobe Fonts).</p>
            <p class="adobe-font2">Aquest text utilitza Minion Pro (Adobe Fonts).</p>
        </section>
    </main>
    <footer>
        <p>Demostració de múltiples fonts amb HTML i CSS.</p>
    </footer>
    <!-- Enllaça l'arxiu CSS -->
    <link rel="stylesheet" href="styles.css">
</body>
</html>

Exemple complet: CSS

/* Estils globals */
body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.6;
    background-color: #f5f5f5;
    color: #333;
}

/* Estils per al header */
header {
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Fonts de Google Fonts */
.google-font1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700; /* Utilitza el pes "bold" de Roboto */
}

.google-font2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Utilitza el pes normal de Montserrat */
}

/* Fonts de Fontshare */
.fontshare-font1 {
    font-family: 'General Sans', sans-serif;
    font-weight: 400; /* Pes normal */
    font-size: 18px;
}

.fontshare-font2 {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400; /* Pes normal */
    font-size: 20px;
    color: #555; /* Color més fosc */
}

/* Fonts d'Adobe Fonts */
.adobe-font1 {
    font-family: 'Proxima Nova', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

.adobe-font2 {
    font-family: 'Minion Pro', serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.8;
}

Es vinculen els link de cada servei al <head> per carregar les fonts.

A l’exemple:

Fonts utilitzades:
- Google Fonts:
  - Roboto: Usada per al títol principal (h1).
  - Montserrat: Usada per al subtítol (h2).
- Fontshare:
  - General Sans: Usada per a un paràgraf.
  - Clash Display: Usada per a un altre paràgraf.
- Adobe Fonts:
  - Proxima Nova: Usada per un text destacat.
  - Minion Pro: Usada per un text amb estil cursiva.
HTML:
- Les classes s’apliquen a diferents elements per demostrar cada font.
CSS:
- Cada font s’aplica mitjançant la propietat font-family amb el nom de la font.
- Es defineixen pesos (font-weight) i estils (font-style) segons els disponibles en cada font.

3.6.1- Exemple d'amimaciós

Animacions amb CSS

Regla @keyframes

Funcionament

Exemple:

Propietat animation

Sintaxi:

Exemple explicat:

Propietats individuals d’animation

Valors que pot poden pendre les propietats

Exemple:

Ús combinat de @keyframes i animation

Exemples d’animacions

1. Animació de desplaçament horitzontal: moure

2. Animació de canvi de color: canviColor

3. Animació de canvi de color de fons: canviFons

4. Animació de rotació: rotar

5. Animació de desplaçament amb estats intermedis: moure

6. Animació d’opacitat: fondre

7. Animació de canvi de mida: redimensionar

Animacions amb pseudoclases, pseudoelements i propietats CSS

Exemple genèric d’ús: Pseudoclases per a animacions

Taula resum de propietats i pseudoclases

Regles @media i @supports

@media: Estils adaptatius segons condicions del dispositiu

Exemple bàsic: Mida de pantalla

Altres usos de la regla @media

Exemple complet: Disseny responsiu amb @media

@supports: Comprovació de compatibilitat

Fonts

1. Incorporar Fonts locals

2. Fonts allotjades al núvol

Google Fonts

Fontshare

Adobe Fonts

3. Fonts web-safe

Exemples pràctics per a cada tipus de font web-safe

Pàgines de Fonts

Exemple de Fonts Locals

HTML

CSS

Exemples de fonts per a descarregar o obtindre el link

Exmples de fonts al nuvol:

Exemple complet: HTML

Exemple complet: CSS

Table of contents

Regla `@keyframes`

Propietat `animation`

Propietats individuals d’`animation`

Ús combinat de `@keyframes` i `animation`

Regles `@media` i `@supports`

`@media`: Estils adaptatius segons condicions del dispositiu

Altres usos de la regla `@media`

Exemple complet: Disseny responsiu amb `@media`

`@supports`: Comprovació de compatibilitat