Transicions

A classe hem aplicat transicions als nostres enllaços amb la classe pildora

.pildora{
...
transition-property: all;
transition-duration:1s;
transition-time-function:ease-in;
transition-delay: 0s;
}

Els quatre paràmetres d’una transició són:

• Propietats CSS que volem que canviin de forma gradual (all = totes; font-size per el cos de la lletra; color per el color;…)
• Durada de la transició. Temps que volem que trigui a passar d’un estat a un altres
• Distribució del canvi en el temps (lineal? gradual de menys a més? gradual de més a menys?…)
• Temps de retràs a l’hora de fer la transició

La durada i el temps de retràs es poden especificar en segons (1s, 0.5s,..) o en míl·léssimes de segons (1000ms, 500ms,…)

Els 4 valors de la transicions es poden indicar per separat o de forma resumida:

transition: all 1s ease-in 0s;

En aquest cas, l’ordre sempre haurà de ser el mateix:

transition: propietat/s durada estil retràs

Pots consultar aquí tots els possibles valors:

https://developer.mozilla.org/es/docs/Web/CSS/transition

A internet pots trobar unes quantes webs que t’ajudaran a generar el CSS de les transicions. Aquí dos exemples:

• https://angrytools.com/css-generator/transition/
• https://www.cssportal.com/css-cubic-bezier-generator/

Propietat en mode de proves a la vista

La propietat transition forma part de les propietats afegides a la última revissió del CSS (CSS 3). Per això, per alguns navegadors està en mode de proves. Quan fem servir aquesta propietat, ens haurem d’assegurar d’escriure-la a prova de qualsevol navegador. Per ajudar-te a fer-ho, pots fer servir aquesta web:

https://autoprefixer.github.io/