Animacions

Les animacions CSS ens permeten fer que les propietats canviïn de forma progressiva i controlada a través del temps, mitjançant una definició de passos anomenada @keyframes.

---

Components d'una animació CSS

1. Propietats d'animació aplicades a l'element
2. Una declaració @keyframes amb:
   • Punt de partida (from o 0%)
   • Punt final (to o 100%)
   • Etapes intermitges opcionals (25%, 50%, etc.)

---

Activació de les animacions

Les animacions es poden activar de diferents formes:

• Per defecte: automàticament en carregar la pàgina
• Amb pseudoclasses: :hover, :focus, :active
• Amb JavaScript: canviant classes que contenen l’animació

---

Diferència entre animacions i transicions

Característica	Transicions	Animacions
Simplicitat	Més senzilles	Més potents
Definició	Amb transition	Amb @keyframes
Control	Limitat a dues etapes	Multi-etapa, detallat
Activació	Per esdeveniment o JS	Per defecte, esdeveniment o JS
Repetició	No	Sí, amb animation-iteration-count

---

Propietats d'animació

animation-name

Nom del @keyframes que defineix l'animació.

animation-duration

Durada d’un cicle d’animació (s o ms).

animation-duration: 2s;

animation-delay

Temps d’espera abans de començar l’animació.

animation-delay: 1s;

animation-iteration-count

Nombre de vegades que es repeteix l’animació.

animation-iteration-count: 1.5; /* o infinite */

animation-direction

Defineix la direcció de l’animació.

animation-direction: normal;
animation-direction: alternate;
animation-direction: reverse;
animation-direction: alternate-reverse;

animation-timing-function

Controla la velocitat interna de l’animació.

ease | ease-in | ease-out | linear | steps(4, end) | cubic-bezier(...)

animation-fill-mode

Defineix l’estil abans o després de l’animació:

none | forwards | backwards | both

---

Sintaxi abreujada

animation: animacio1 2s ease-in 1s 3 alternate both;

Format:
animation: <nom> <durada> <funció> <retard> <iteracions> <direcció> <omplert>;

---

Declaració @keyframes

@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

També es poden usar percentatges:

@keyframes rebotar {
  0% {
    top: 0;
  }
  50% {
    top: 100px;
  }
  100% {
    top: 0;
  }
}

---

Exemple: barra de progrés

@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.progress {
  animation: progress 3s linear forwards;
}

---

Aquest capítol t’ensenya a definir animacions completes amb CSS, permetent crear efectes visuals moderns, seqüències, càrregues i interaccions més fluides per millorar l’experiència de l’usuari.