TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES CON CSS3 y HTML5

El siguiente trabajo trata sobre las soluciones que nos proporciona CSS3 a la hora de aplicar algunos efectos a los elementos de un documento HTML5.

Años atrás estas acciones estaban reservadas a JavaScript o a herramientas más específicas como Flash, pero en la actualidad gracias a los nuevos estándares, podemos aplicar transformaciones, transiciones y animaciones a los elementos de nuestra web utilizando CSS.

Gracias a la combinación de HTML5 con CSS3 se pueden crear sitios tan potentes como los que se realizaban con Flash, de ahí que esta tecnología (no optimizada para SEO entre otras razones) haya sido desplazada, y en la actualidad solo se utilice en la creación de aplicaciones y juegos para móviles. En líneas generales existen tres ventajas principales del uso de CSS3 para efectos sobre las técnicas basadas en scripts:

FÁCIL DE USAR

Son muy fáciles de usar para efectos sencillos, ya que se pueden hacer sin tener conocimientos de JavaScript.

SIEMPRE VISIBLES

Los efectos se muestran siempre de forma correcta incluso en equipos informáticos poco potentes.

OPTIMIZADO

Al ser un navegador el que controla la secuencia del efecto, permite que se optimice el rendimiento y eficacia del mismo.
TRANSFORMACIONES

Las transformaciones de CSS3 permiten modificar el aspecto de los elementos de una página web en 2D como en 3D, siendo estas últimas más complejas, al tener en cuenta los tres ejes de coordenadas.

Una cosa a tener en cuenta al aplicar una transformación a un elemento es que este cambia a nivel visual pero el espacio que ocupa en la posición no varía, de manera que se coloca encima de otros elementos pero en ningún caso los desplaza. Existen 4 tipos de transformaciones, y todas ellas se escriben con la propiedad transform seguida de las funciones:

ROTATE

 

  • Permite rotar un elemento dándole un ángulo de giro.
  • El valor de la función se expresa con un número que indica los grados, de manera que estos pueden ir de 0 a 360.
  • El punto de referencia que toma como eje para hacer la rotación por defecto es el centro, aunque se puede utilizar otro punto empleando la propiedad transform-origin.

SCALE

  • Permite escalar o cambiar el tamaño de un elemento.
  • Los valores se definen con números positivos o negativos, y estos pueden ir acompañados de decimales. Si el valor es positivo el elemento se hace más grande, y por el contrario, si es negativo se hace más pequeño. Por ejemplo para hacer un 50% más pequeño, escribiremos .5, mientras que para hacerlo un 50% más grande 1.5.
  • También se puede cambiar el tamaño del elemento tan solo uno de los ejes. Para ello se puede utilizar la función scaleX para modificar la escala horizontalmente y la función scaleY para cambiar el tamaño en el eje vertical.
  • También es posible dar dos valores diferentes según la X y la Y, con lo que creamos un efecto de escala no proporcional que nos da un efecto visual de distorsión.

TRANSLATE

  • Nos permite desplazar un elemento a la vez en el eje de las X y de las Y, dándole las coordenadas iniciales y finales, de manera que conseguimos que un elemento pase de estar en una posición a otra.
  • Como existe el plano X e Y, se necesitan definir dos valores separados por una coma.
  • Estos valores pueden ser porcentajes o valores absolutos.
  • Si queremos que el elemento se desplace en sentido contrario los valores que se definirán deben ser negativos.
  • Para que el elemento se traslade solo en una dirección, podemos dar valor 0 a alguna de las coordenadas o emplear las funciones traslateX para desplazarlo en horizontal o la función traslateY para el eje vertical.

SKEW

  • Permite deformar o distorsionar un elemento en el eje X o en el eje Y.
  • El valor de la función se expresa en grados, positivos si queremos que se deforme en una dirección, y negativos para hacerlo en sentido contrario.
  • Si solo queremos distorsionar el elemento en uno de sus ejes, utilizaremos la funciones skewX (el elemento se distorsiona en horizontal) o skewY (el elemento solo se deforma en su eje vertical).
TRANSICIONES

Las transiciones son las animaciones más básicas que se pueden hacer con CSS. Estas se definen como el cambio que existe entre dos estados de un elemento y que se da en un intervalo de tiempo de forma gradual

 

 

Cuando hablamos del estado de un elemento nos referimos al valor de sus propiedades en ese instante. Al realizar la transición se produce un cambio en los valores de algunas de la propiedades de ese elemento. Por ejemplo si queremos cambiar el color del fondo de un texto de blanco a gris, solo cambiará el valor de la propiedad background-color. En este ejemplo la transición corresponderá con el efecto que se produce mientras cambia de color durante el intervalo de tiempo que se defina.

 

 

Para activar una transición es necesario que se detecte un evento, por ejemplo con :hover, :active o :focus. En el momento en que deje de estar activo el evento, el elemento recuperará su forma original.

Al igual que con muchas otras propiedades de CSS, podemos poner varios valores en una sola línea. Las propiedades con las que contamos a la hora de aplicar transiciones a los elementos son las siguientes:

 

  • Indica sobre qué propiedad del elemento se aplicará la transición.
  • Pueden especificarse varias propiedades separándolas por comas.
  • El valor por defecto es ‘all’ que indica que la transición se aplicará sobre todas las propiedades del elemento.
  • Tabla con todas las propiedades para transition-property.
background-color font-size outline-offset
background-image font-weight outline-width
background-position grid padding-bottom
border-bottom-color height padding-left
border-bottom-width left padding-right
border-color letter-spacing padding-top
border-left-color line-height right
border-left-width margin-bottom text-indent
border-right-color margin-left text-shadow
border-right-width margin-right top
border-spacing margin-top vertical-align
border-top-color max-height visibility
border-top-width max-width width
border-width min-height word-spacing
bottom min-width z-index
color opacity
crop outline-color
  • Indica el tiempo que tardará la transición en completarse.
  • El valor por defecto es 0 y podemos expresarlo tanto en segundo como en milisegundos, por ejemplo 1.5s y 1500ms tendrán una misma duración.
  • Nos indica el comportamiento de la velocidad durante la transición.
  • Esto se refiere a si será un movimiento con aceleración al principio, al final o al inicio y fin de la transición.
  • Esta progresión de la transición está relacionado con las llamadas curvas Bezier, pudiendo programarlas nosotros o darle alguno de estos valores:
    ease Es el valor por defecto y la transición se produce lentamente al principio, aumentando su velocidad para después reducirla en el último tramo.
    linear La velocidad de la transición se produce en progresión lineal.
    ease-in La velocidad al principio es más lenta para después ir más rápido.
    ease-out La transición arranca de forma rápida y termina lentamente.
    ease-in-out Mismo comportamiento que ease pero más acentuado.
    cubic-bezier(n,n,n,n) Con la que podemos definir nuestro propio intervalo de progresión y donde n puede tener como valor entre 0 y 1.
  • Nos permite indicar el tiempo que tarde la transición en comenzar.
  • Por defecto es 0 pero este tiempo de espera puede tomar valores positivos o negativos.
  • En el caso de dar un valor negativo, cuando se accione el evento, la transición comenzará teniendo en cuenta el tiempo de retardo indicado. Por ejemplo, si ponemos como valor negativo 2 segundos, y tenemos una animación que dura 10 segundos, la transición no comenzará desde el principio sino en el segundo 2.
  • Podemos unificar todas las propiedades anteriores en una sola.
  • Por ejemplo, podemos indicar en la misma línea transition: width 3s ease-in 200ms, que en este caso afectaría a anchura, con una duración de tres segundos, con una progresión más lenta al principio para luego ir más rápido y que tardaría 0.2 segundos en iniciarse.
ANIMACIONES

Aunque CSS no sea es herramienta de animación como Flash, podemos añadir movimiento para enriquecer las interacciones con los usuarios.

 

Las animaciones y las transiciones tienen en común que se aplican a los valores de las propiedades de un elemento transformándolos gradualmente en otros valores, pero las animaciones nos ofrecen un control mayor en el proceso de transformación del elemento.

Las transiciones se ponían en marcha cuando se producía un evento, mientras que las animaciones se lanzan de forma explícita, ya que no espera a que se produzca un cambio en el estado de un elemento.

Una animación tiene lugar en el tiempo, con lo que vamos a tener que tomar diferentes puntos dentro de un fragmento de tiempo para especificar que sucede en cada uno de ellos. En estos puntos, también conocidos como keyframes, podemos introducir un cambio en los valores de la propiedad animada, de manera que la suma de estos cambios nos dará como resultado una animación.

Para animar un elemento, lo primero que tenemos que hacer es definir o declarar la animación en alguna parte de nuestro CSS, mediante la regla keyframes. Esta regla se escribe @keyframes más el nombre con el que decidamos denominar a la animación.

Después entre llaves, los distintos pasos o las instrucciones de la animación. En su forma más simple tenemos que declarar un principio y un final, mediante las palabras from y to.

Dentro de estos pasos, escribimos de nuevo entre llaves el valor inicial de nuestra animación y la propiedad o propiedades del final.

Si queremos animaciones un poco más complejas, podemos utilizar más de dos pasos expresándolos en porcentajes, que equivaldrían a la línea temporal de la animación.

Una vez tenemos la animación definida, lo siguiente es poder aplicarla a algún elemento. Para ello, utilizamos la propiedad animation, que en su forma más simple constaría tan solo del nombre que antes hemos asignado a la animación y la duración de la animación. Si no decimos lo contrario, la animación se producirá en cuanto se cargue la página.
Otros parámetros que podemos añadir a la propiedad animation son:
  • Nombre con el que hemos denominado la animación y que actuará sobre el elemento.
  • Nos permite definir el tiempo que dura la animación desde el inicio hasta el final.
  • El valor por defecto es 0 y podemos expresarlo tanto en segundo como en milisegundos, por ejemplo 1.5s y 1500ms tendrán una misma duración.
  • Nos permite especificar el número de veces que se repetirá la animación.
  • Su valor por defecto es 1, pero si queremos que se repita de forma indefinida, podemos dar el valor.
  • Al igual que en las transiciones, esta propiedad señala cómo progresará la animación. Esta propiedad acepta los mismos valores como ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n).

 

ease Es el valor por defecto y la transición se produce lentamente al principio, aumentando su velocidad para después reducirla en el último tramo.
linear La velocidad de la transición se produce en progresión lineal.
ease-in La velocidad al principio es más lenta para después ir más rápido.
ease-out La transición arranca de forma rápida y termina lentamente.
ease-in-out Mismo comportamiento que ease pero más acentuado.
cubic-bezier(n,n,n,n) Con la que podemos definir nuestro propio intervalo de progresión y donde n puede tener como valor entre 0 y 1.
  • También en las animaciones podemos especificar el tiempo de espera antes de que arranque.
  • Con la que podemos indicar el orden en el que se ejecutará la animación.
  • Como valor por defecto normal, pero si queremos que la animación se haga en sentido inverso, es decir, que empiece por el final, daremos el valor alternate.
  • Si por ejemplo tenemos dos repeticiones de la animación (animation-iteration-count:2) y el valor de esta propiedad fuese alternate, primero se ejecutará la animación en orden normal de 0 a 100% y luego al revés del 100% a 0. Si tenemos como valor normal, las dos veces se ejecutaría de 0 a 100%.
  • Indica si la animación está corriendo o pausada.
  • Acepta los valores running (valor por defecto) y paused.
  • Nos permite decidir si los valores de las propiedades modificadas en la animación, vuelven a su estado original o no.
  • Acepta los valores: none, forwards, backwards y both.
  • Por defecto es none que indica que cuando acabe la animación, el elemento recuperará los valores que tenían sus propiedades antes de arrancar la animación.
  • Con la que podemos unificar las propiedades anteriores en una sola.
  • Un ejemplo podría ser algo como:

RECURSOS

TRANSFORMACIONES W3.ORG

Normas para transformaciones

TRANSICIONES W3.ORG

Normas sobre las transiciones

CURSO DE CSS

Videotutorial sobre transiciones y animaciones

EJEMPLOS HECHOS EN CSS

Post donde se muestran ejemplos de transiciones y animaciones realizados con CSS