CSS transitions

 Compartiu 

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:

• transition-property: permet indicar la propietat d'un element sobre la qual els canvis d'estat seran aplicant un transició
• transition-duration: permet definir el temps de la transició
• transition-timing-function: especifica la corba de velocitat de la transició ([1]). Valors possibles

ease: és el valor per defecte. Slow start, then fast, then end slowly. https://developers.google.com/web/fundamentals/design-and-ui/animations/the-basics-of-easing

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

Easing

Easing

Vegeu https://developers.google.com/web/fundamentals/design-and-ui/animations/the-basics-of-easing

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é

• CSS/CSS3
• HTML

Enllaços externs

• https://daneden.github.io/animate.css/
• http://www.w3schools.com/css/css3_transitions.asp
• https://www.w3.org/TR/css3-transitions/
• https://css-tricks.com/almanac/properties/t/transition/
• http://code.tutsplus.com/tutorials/css-fundamentals-css3-transitions--pre-10922