Hablemos de las transiciones en CSS3 (transition)

Esta vez vamos a hablar de las transiciones en CSS3 por medio de la propiedad Transitions, con esta nueva propiedad de CSS3 vamos a poder aplicar efectos de transiciones para cambiar de un estilo a otro sin tener que utilizar la tecnología flash o Javascript, solamente con CSS3 vamos a conseguir esto.

Las transiciones en css se declaran junto con las propiedades que regulan el elemento en cuestión, para cuando cambien las propiedades a su destino el navegador aplicara estos estilos de transición para dar suavidad al cambio y una mejor apariencia al elemento.

Primero tienes que saber que esta propiedad no es acogida por los navegadores de una manera estándar, si no que vamos a tener que utilizar los prefijos de cada navegador.

* Firefox 4+ requiere el prefijo -moz-.

* Chrome y Safari requiere el prefijo -webkit-.

* Opera requiere que el prefijo -o-.

(Ver nota de los prefijos de las navegadores)

Compatibilidad de navegadores con las transiciones CSS3

compatibilidad-navegadores-css3-transitions

transition y sus propiedades

Segun la W3 y el modulo que trabaja transition exiten 4 propiedades hasta ahora: (transition-property, transition-duration, transition-timing-function, y transition-delay.)

transition-property: especifica el nombre de la propiedad CSS a la que se aplica la transición.

transition-duration: define el tiempo que tomara la transición.

transition-timing-function: Especifica la curva de velocidad del efecto de la transición

transition-delay: determina el tiempo que transcurrirá antes de comenzar la transición.

—–

1 – transition-property – (propiedad de la transición):

Con la propiedad transition-property declaramos el nombre de la propiedad CSS sobre la que se aplica la transición. Los valores posibles son: all o none y por supuesto la propiedad o propiedades

all = Todas las propiedades tendrán un efecto de transición.
none = Ninguna de las propiedades tendrán un efecto de transición.

la utilizamos para listar las propiedades que se cambiarán, ya sea una o varias separadas por comas.

2 – transition-duration – (duración de la transición):

La propiedad de transition-duration o duración de la transición especifica cuántos segundos (s) o milisegundos (ms) tendra un efecto de transición para llegar al final.

3 – transition-timing-function – (temporización de la transición):

Esta propiedad es la que determina cómo se desarrolla la transición en el tiempo estipulado, es decir cual será su comportamiento en el desarrollo de la transición. Esta propiedad cuenta con varios valores de comportamiento, que son los siguientes:

Linear: Especifica un efecto de transición con la misma velocidad de principio a fin.

ease: Especifica un efecto de transición con un comienzo lento, luego rápido, luego terminan lentamente

ease-in: Especifica un efecto de transición con un comienzo lento

ease-out: Especifica un efecto de transición con un final lento

ease-in-out: Especifica un efecto de transición con un comienzo lento y final lento.

cubic-bezier(n,n,n,n): Nos hace Definir valores propios de principio a fin. Los valores posibles son los valores numéricos de 0 a 1

Veamos un ejemplo de cada uno de los valores:

linear
ease
ease-in
ease-out
ease-in-out

donde aplicamos a cada barra un valor diferente, Claro que debemos asignarle los prefijos de cada navegador

3 – transition-delay – (demora de la transición):

Especifica el retraso con el que comienza la transición. El valor de retardo de transición se define en segundos (s) o milisegundos (ms) y admite valores negativos y positivos:

la sintaxis es : transition-delay: time;

Veamos un Ejemplo con varios valores:

2s

Lo que hace la anterior función es hacer la transición después de 2 segundo de estar en el estado hover, y despues de 2 sugundos vuelve al estado original.

La propiedad transition resumida:

Estas propiedades también tienen una forma acortada o resumida para declarar todas o algunas de ellas lo que llamamos (Shorthand), que lo que hacemos es combinar las 4 propiedades, que seria algo asi.

transition: property duration timing-function delay;

transicion: [<transition-property> | | <transition-duration> | | <transition-timing-function> | | <transition-delay>]

Mas informacion en http://www.w3schools.com/cssref/css3_pr_transition.asp

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo