CSS3: Propiedad Transition, crea animaciones solo con CSS

Para nosotros los creadores de la magia en internet, los que hacemos posible que los internautas pasen un buen (o mal) rato navegando por internet, para nosotros que siempre estamos tratando de llevar lo mejor a nuestros amigos lectores, hay una buena noticia. Gracias a los ultimos desarrollos del lenguaje CSS podremos ofrecer una mejor experiencia en nuestros sitios con el menor esfuerzo.

Esta es una de esas propiedades que cambian por completo la forma de renderizar las páginas web para un navegador web, o al menos para los que estamos acostumbrados al oscuro CSS2. Y es que 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!

Aunque se vea un poco lento y feo, se ve interesante no? la mejor parte de esto es que podremos hacer que este tipo de cosas funcionen sin tocar una sola línea de código de programación y lo haremos de una manera tan sencilla que en menos de lo que piensas lo estarás aplicando a tu sitio.

Sintaxis

Entrando en materia, la sintaxis de esta propiedad se puede colocar de dos formas, pero si me preguntaran por la manera mas sencilla de hacerlo sería de la siguiente forma: La segunda manera de aplicarlo es separando la declaración en cuatro diferentes propiedades y aunque suene complicado no lo es, basta con hacerlo de la siguiente manera: Esta segunda forma de aplicarlo es interesante si quieres recordar que es lo que estas tocando al momento de hacer alguna modificación en el futuro, pero si sabes lo que estas haciendo o si quiere hacerlo de manera práctica te recomiendo que uses la manera sencilla, es la que yo más utilizo.

Para aplicar esto a nuestro HTML es igual que cualquier otra propiedad CSS. Aquí te dejo un ejemplo de como se implementaría en todos los párrafos de un sitio web:

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

Si te preguntas que es lo que puedes hacer con esta interesante propiedad de CSS, a continuación te explicamos que es lo que puedes colocar en cada campo de la declaración. Sólo para asegurar que tengas todo lo que necesitas para crear las animaciones que te estas imaginando en este momento.

[Propiedad CSS]

Aqui puedes colocar CUALQUIER propiedad CSS que te imagines, ésta será la propiedad a la que se afecte. Si quieres una lista con ejemplos aqui hay algunos:

Demasiadas opciones no?, si no te decides o si quieres que todas las propiedades se animen existe también una opción que actúa como un "comodín", lo que significa que no importa cual propiedad CSS o incluso si son dos o tres esta opción seleccionará todas las propiedades CSS:

[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.

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.- 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.

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: Código HTML: Ejemplo:

Este es cualquier elemento de mi página web

---

Código CSS: Código HTML: Ejemplo:

Este es cualquier elemento de mi página web

Cada quién tiene ideas diferentes así que seamos creativos :P!!!