Animación con CSS del border radius

Animación con CSS del border radius

Hace un tiempo vi un video de una presentación de Lea Verou, uno de los cracks mundiales del CSS,  sobre la propiedad  border-radius. Al principio llama la atención que se pueda hablar mucho rato sobre esta propiedad, pero como tantas otras, sobre todo de CSS3, esconde en su interior mucha más potencia de lo que parece. Uno de los momentos estelares del video es cuando combina el border-radius con animación consiguiendo un efecto muy potente sólo con CSS y unas pocas líneas de código.

El efecto es el siguiente:  (en el video de Lea es más espectacular porque anima un gráfico SVG más vistoso, la imagen de la cabecera de este post).

 

El video, muy recomendable, es este: http://vimeo.com/70171266 el ejemplo que menciono está en el min 34.

 

Voy a hacer una breve introducción a la animación CSS y al border-radius para explicar este ejemplo.

 

Animación CSS

La ventaja principal de la animación CSS respecto a hacerla con javascript es que es más óptima y consume menos recursos. Es más fácil que ordenadores poco potentes la realicen con suavidad.

Está disponible en todos los navegadores modernos desde hace unas bastantes versiones excepto, como no, nuestro amigo Internet Explorer que sólo la permite desde IE 10.

A continuación, para simplificar, pondré la  sintaxis básica sin los prefijos de los diferentes navegadores:
Primero hay que definir en el elemento a animar el nombre de la animación, el tiempo de cada iteración y las veces que se realizará la animación.  Con alternate conseguimos que la siguiente iteración sea en el orden contrario a la anterior:

A continuación hay que definir la animación. En el from se pone el estado inicial y en el to el final.

Ejemplo:

Elemento a animar

 

 

También se pueden usar porcentajes para definir con más detalle cada estado.

Elemento a animar por fases

 
 

 Border-radius

Esta propiedad sirve para conseguir los famosos bordes redondeados. Se puede usar en cualquier navegador excepto IE 8 y anteriores. Además no son necesarios prefijos.

La sintáxis básica es:

Donde 5px es el radio de la circunferencia que forma la curva en cada esquina del elemento.

Se puede poner una cifra diferente para cada esquina y además añadiendo un “/” se puede definir un radio diferente para el eje Y pudiendo crear así una elipse.

Todo esto se ve fácilmente en el siguiente ejemplo con una imágen.

 

border-radius01

 

En el video, Lea combina todo esto con porcentajes en lugar de píxeles para obtener todo tipo de figuras diferentes.

 

Combinando la animación y los bordes obtenemos la imágen del principio del post:

 

 

En este codepen está el ejemplo con todos los prefijos y se pueden modificar parámetros para comprender mejor cómo funciona.

Y nada más, espero que haya sido útil este pequeño ejemplo que muestra que el CSS no es sólo para dar tamaño y posicionar un elemento sino que profundizando un poco se pueden conseguir con unas pocas líneas efectos sorprendentes.

 

Bibliografia:

En el siguiente enlace se puede conseguir un libro gratis sobre Animaciones CSS.

 

3 Comentarios

  1. Oscar. Eres muy talentoso. Te felicito. Especialmente encuentro muy util tu app noteboard.
    Saludos.

    Responder
    • ¡Muchas gracias por tu comentario Javier!

      Responder
  2. Cual de las transiciones es la que consume menos recursos y mas optimas para dispositivos móviles de poco procesador y memoria?

    Para que el scroll vaya fluido. Gracias.

    Responder

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *