IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Les transicions CSS són un mètode simple per animar certes propietats d'un element CSS amb l'habilitat de poder definir la duració, el retard i el timing de la transició.

Suport

Vegeu caniuse

http://caniuse.com/#search=css%20transition

Introducció

Transition property

La propietat transition és una propietat abreujada de:

ease: és el valor per defecte. Slow start, then fast, then end slowly.
linear: La mateixa velocitat d'inici a fi.
ease-in: Slow start
ease-out: Slow end
ease-in-out: Slow start and end
cubic-bezier(n,n,n,n): permet indicar valors a mida
  • transition-delay: un possible retard a aplicar abans de fer la transició (valor opcionnal o el retar per defecte és 0)

I per tant permet definir les quatre qüestions importants d'una transició en una sola propietat. Permet definir com serà la transició entre dos estats d'un element. Els canvis d'estat poden ser definits utilitzant pseudo-clases com hover o active o mitjançant codi dinàmic JavaScript.

Sovint no valdrà especificar totes les opcions, vegem un exemple simple sobre el qual només definim el temps d'una transició:

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

div:hover {
    width: 300px;
}

En aquest cas la transició durarà dos segons al canviar l'ample de l'element de 100 a 300px. Podeu provar l'exemple a:

http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

Es poden canviar diverses propietats al mateix temps:


div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

NOTA: Cap de les quatres opcions duration, timin-funcion o delay són boligatories però si no donem valor de duration serà com no tenir transició ja que el valor per defecte és 0s

Sintaxi

Exemples:

 /* Aplicar a 1 propiedad */
/* nombre de la propiedad | duración */
transition: margin-left 4s;

/* nombre de la propiedad | duración | retardo */
transition: margin-left 4s 1s;

/* nombre de la propiedad | duración | función | retardo */
transition: margin-left 4s ease-in-out 1s;

/* Aplicar a 2 propiedades */
transition: margin-left 4s, color 1s;

/* Aplicar a todas las propiedades que cambien */
transition: all 0.5s ease-out;

Exemples

Exemple bàsic

http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

Codepen

http://codepen.io/tag/css%20transitions/

Llibreries

Animate

Animate o Animate.css és una llibreria per facilitar les animacions CSS:

https://daneden.github.io/animate.css/
https://github.com/daneden/animate.css/

Podeu veure un exemple d'ús amb vue:

https://laracasts.com/series/learning-vue-step-by-step/episodes/17

Vue

Vegeu Vue transitions o Vue Animations

Vegeu també

Enllaços externs