Skip to main content

Transicions

Les transicions CSS ens permeten controlar com una propietat canvia al llarg del temps. En comptes que el canvi sigui instantani, podem fer-lo progressiu i animat.

Propietats fonamentals​

transition-property​

Indica quina propietat volem animar.

transition-property: background-color;

També podem posar diverses propietats separades per comes:

transition-property: color, background-color;

Per aplicar la transició a totes les propietats:

transition-property: all;

transition-duration​

Defineix la durada de la transició (obligatòria perquè funcioni).

transition-duration: 0.5s; /* també pot ser 500ms */

transition-delay​

Indica el temps d’espera abans de començar la transició.

transition-delay: 1s;

transition-timing-function​

Controla la velocitat del canvi durant la transició. Exemples:

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: linear;
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

Shorthand​

La forma abreujada permet escriure tot en una sola línia:

transition: background-color 0.5s ease-in 0.2s;

Format:
transition: <property> <duration> <timing-function> <delay>;

Exemples​

Transició sobre una sola propietat​

div {
  transition-property: background-color;
  transition-duration: 0.5s;
}

Transició sobre diverses propietats amb mateixa durada​

div {
  transition-property: color, background-color;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: ease-out;
}

Transició sobre diverses propietats amb diferents durades​

div {
  transition-property: color, background-color;
  transition-duration: 0.5s, 1s;
}

Concatenar transicions​

No podem encadenar directament dues transicions amb diferent retard de forma natural.
Per aconseguir-ho, cal:

  • Fer servir classes CSS aplicades amb JavaScript
  • O dividir els canvis entre diferents etapes visuals

Transformacions relacionades​

Per aplicar rotacions i escales:

transform: rotate3d(x, y, z, angle)​

transform: rotate3d(0, 1, 0, 180deg);

transform: scale()​

transform: scale(1.2);

Aquest capítol et permet controlar visualment com canvien les propietats CSS al llarg del temps, fent la teva web molt més dinàmica i atractiva.