Propiedad transition

Esta es una de esas propiedades que cambian por completo la forma de renderizar las páginas web para un navegador web. Mediante esta propiedad de CSS3 podemos crear cualquier tipo de animación en nuestro sitio web. Ya sea girar, aumentar de tamaño, cambiar color de fondo, color de letra o el color de sombra a cualquier elemento de nuestros sitios web, veamos de que hablo:

CSS funny!

En este lento ejemplo se puede ver con detalle la transición de un estado a otro, pero no te asustes que se aplica de una manera muy sencilla. A lo largo de esta entrada explicaré como puedes aplicarlo a tu sitio.

Sintaxis

Esta propiedad se puede colocar de dos formas, sin embargo la manera mas sencilla de colocarlo es de la siguiente manera directa:

transition:[Propiedad CSS] [Duración] [Función de Tiempo] [Retardo];

O también se puede implementar de manera separada, la sintaxis de esta otra forma es de la siguiente:

transition-property:[Propiedad CSS];
transition-duration:[Duración];
transition-timing-function:[Función de Tiempo];
transition-delay:[Retardo];

Se coloca de la misma manera que cualquier otra propiedad de CSS, como la de "background" o "color". Para dejarlo mas claro, mira un ejemplo de su utilización:

En este ejemplo estamos afectando a todas las etiquetas <p> con la propiedad transition

p{
  transition:[Propiedad CSS] [Tiempo] [Función de Tiempo] [Retardo];
}

A continuación te explicaremos cuales son las opciones que nos dan cada sub-propiedad para poder comenzar a crear nuestras animaciones de una manera mas original. Comenzaremos con la primer sub-propiedad.

[Propiedad CSS]

Aquí podemos colocar la propiedad CSS que será animada, podemos colocar cualquier propiedad CSS que este en la siguiente lista:

background-color
border
border-radius
color
top
bottom
left
right
box-shadow
clip
fill
height

width
line-height
letter-spacing
margin
opacity
outline
stroke
text-shadow
vertical-align
word-spacing
visibility
z-index

Existe también una opción "comodín" que no importa cual propiedad o incluso si son dos esta opción seleccionará todas las propiedades CSS:

all

[Tiempo]

Aquí podemos colocar el tiempo que durará nuestra animación, ¿cuánto tiempo quieres que tarde en agregar ese borde rojo?. Lo podemos colocar en unidades de segundos, cualquier cantidad de segundos que quieras.

.1s
.5s
1s
10s

Siempre recordando que no hay que abusar de esta propiedad, pues si ponemos mucho tiempo el usuario se aburrirá de esperar a que ocurra el efecto. Y si colocamos demasiado poco tiempo no podrá ver la animación.

[Función de Tiempo]

Aquí es un tanto extraño para muchos que no son muy adentrados en el tema de animaciones. Se trata de unas funciones que están predefinidas que permiten que avance mas rápido al inicio de la animación y mas lento al final, al revés o que dure mas tiempo en el medio de la animación.

Podemos colocar cualquiera de estas funciones que ya están definidas:

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

linear.- La animación se realiza de manera uniforme
ease.- La animación acelera al inicio se retarda un poco y se acelera al final de nuevo
ease-in.- La animación se retarda al inicio, pero lo repone al final
ease-out.-La animación se acelera al inicio pero se retarda al final,
ease-in-out.- La animación se retarda al inicio se acelera un poco luego se retarda al final de nuevo.

Cabe rescatar que aunque se retarde al inicio, al final o a la mitad de la animación siempre durá el tiempo que le definimos en la sub-propiedad [Tiempo].

[Retardo]

Aqui colocaremos el tiempo que tardará la animación en iniciar. Lo debemos definir en unidades de segundos. Tambien hay que tener un poco de tacto y ponernos en los zapatos de nuestras visitas y no colocar demasiado tiempo.

.1s
.5s
1s
10s

Ejemplos

Ahora veamos un ejemplo de la propiedad Transition en funcionamiento, para disolver dudas siempre he dicho que es mejor ver un ejemplo funcionando:

Código CSS:

#ej1{
  width:400px;
/* Aqui colocamos la transicion para cada navegador */
  -webkit-transition:all 1s ease-out;  /* Chrome y Safari */
  -o-transition:all 1s ease-out;  /* Opera */
  -moz-transition:all 1s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 1s ease-out;   /* Internet Explorer */
  transition:all 1s ease-out;  /* W3C */
}
#ej1:hover{
  width:450px;
}

Código HTML:

<div id='ej1'>Este es cualquier elemento de mi página web</div>

Ejemplo:

Este es cualquier elemento de mi página web

---

Código CSS:

#ej2{
  width:400px;
/* Aqui colocamos la transicion para cada navegador */
  -webkit-transition:all 1s ease-out;  /* Chrome y Safari */
  -o-transition:all 1s ease-out;  /* Opera */
  -moz-transition:all 1s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 1s ease-out;   /* Internet Explorer */
  transition:all 1s ease-out;  /* W3C */
}
#ej2:hover{
  text-shadow:0 0 20px black;
  color:#555;
  box-shadow:0 0 10px 0 black;
}

Código HTML:

<div id='ej1'>Este es cualquier elemento de mi página web</div>

Ejemplo:

Este es cualquier elemento de mi página web

Fuente: Hacker of the web