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#

---

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.