Añadir personalidad a las páginas web con Transiciones y Animaciones de CSS3

Ciertos avances como el JavaScript compilado de alto rendimiento y el rendering acelerado por hardware de HTML5 y CSS3 disponibles en las versiones Internet Explorer 9 y 10 permiten a los desarrolladores crear experiencias cada vez más avanzadas. Dos funcionalidades estrechamente relacionadas como son las Transiciones de CSS3 y las Animaciones CSS3, nos ofrecen una vía declarativa para añadir personalidad a las interacciones con nuestras páginas web, de una manera sencilla.

En este post describimos estas dos funcionalidades tal y como se presentan en IE10 en la Preliminar de Desarrollo de Windowsy en las de Aplicaciones estilo Metro escritas en HTML para Windows 8.

El mismo código – excepto en el prefijo de fabricante

Como ocurre con casi todas las novedades en IE9 y IE10, las Transiciones y Animaciones de CSS3 se basan en estándares implementados teniendo como objetivo la interoperabilidad con el “mismo código de markup”. No obstante, a diferencia de otras funcionalidades como los bordes redondeados o el sombreado de objetos y de textos, que forman parte ya de especificaciones estables del W3C, las Transiciones y Animaciones siguen todavía en fase de desarrollo de la especificación, en la cual cada fabricante asigna un prefijo a sus propias implementaciones. Por tanto, en este caso, cuando decimos “el mismo código”, nos estamos refiriendo a “el mismo código, pero con el prefijo de cada fabricante”

Muchos otros autores han escrito ya sobre estas funcionalidades, como por ejemplo Rich Bradshaw en su excelente artículo Using CSS3 Transitions, Transforms and Animations. Muchos artículos que analizan estas funcionalidades solo utilizan el prefijo –webkit- en sus ejemplos. Los usuarios que quieren experimentar con otros navegadores necesitan copiar el ejemplo y cambiar el prefijo –webkit- por –ms-, -moz- o bien –o- según corresponda. Los ejemplos de Bradshaw son una excepción: ¡funcionan directamente en IE10!

Transiciones

La función de las Transiciones CSS3 es fácil de explicar: cambiar progresivamente el valor calculado de una propiedad CSS desde un valor inicial a otro indicado como valor final. Más aún: ciertos cambios de valor como resultado de cambios en la clase CSS o pseudo-clase de un elemento también disparan las transiciones.

Veamos este código de ejemplo:

img {

    opacity: 1;

    transition-property: opacity;

    transition-duration: 2s;

    transition-delay: 0s;

    transition-timing-function: linear;

}

img:hover {

    opacity: 0;

}

El efecto que produce es que cuando el usuario mueve el ratón sobre la imagen, ésta se desvanece poco a poco en unos dos segundos, como se muestra en esta secuencia de imágenes (he añadido una sombra en el contenedor para identificar el último estado).

Desvanecimiento de una imagen a blanco en 2 segundos

Las propiedades de transición que hacen posible este efecto son:

• transition-property– indica qué propiedades CSS van a alterarse. La palabra clave “all” hace que todas las propiedades susceptibles de animación se modifiquen cuando cambie su estado. El valor por defecto es “all”.
• transition-duration– el tiempo, medido en segundos o milisegundos, de la transición, comenzando después de un valor de retardo (“transition-delay”). El valor por defecto es cero, lo que significa que la transición es inmediata.
• transition-delay– el tiempo, medido en segundos o milisegundos, tras el cual se modifica el valor antes de que empiece la transición. El tiempo puede ser negativo, en cuyo caso la transición comienza en un punto más avanzado de su línea de tiempo. El valor por defecto es cero.
• transition-timing-function– indica de qué forma se deben calcular los valores intermedios de la transición. Esto nos permite regular la velocidad del cambio a lo largo del tiempo que dura la transición. La función subyacente es una curva de Bezier cúbica; las palabras clave se corresponden con funciones habituales. El valor por defecto es “ease”, una función que comienza rápidamente y se va haciendo cada vez más lenta hacia el final.

Hacer desaparecer una imagen progresivamente es solo un ejemplo sencillo. Supongamos que queremos fundir una imagen hacia otra, como se ve a continuación.

Fundido de la imagen inicial hacia otra diferente, en dos segundos

El código siguiente lo hace (ten en cuenta siempre que los prefijos de fabricante deben preceder a todas las propiedades de transición).

Fragmento de HTML:

<div id="imageWrapper">

    <img id="backImage" src="imageB.jpg" /><img id="frontImage" src="imageA.jpg" />

</div>

Sección de CSS:

#imageWrapper {

    display: inline-block;

    width: 400px;

    height: 267px;

    box-shadow: 2px 2px 5px 0px gray;

    position: relative;

}

#imageWrapper img {

    width: 400px;

    height: 267px;

    position: absolute;

    transition-property: opacity;

    transition-duration: 2s;

    transition-timing-function: linear;

}

#imageWrapper #frontImage, #imageWrapper:hover #backImage {

    opacity: 1;

}

#imageWrapper:hover #frontImage, #imageWrapper #backImage {

    opacity: 0;

}

Aquí tienes una versión funcional de este mismo código:

Mueve el ratón sobre la imagen para fundirla con la otra.

Ciertas transiciones sencillas, como la anterior, se pueden simular con no demasiado esfuerzo empleando JavaScript. Las ventajas de las Transiciones CSS son sus definiciones declarativas, que son más fáciles de utilizar que el script y funcionan –al menos en IE10- de forma asíncrona con respecto al thread principal de procesamiento de la página, lo que da lugar a transiciones menos bruscas y mejoran la capacidad de respuesta de los sitios web.

Puedes ver una demo interactiva de Transiciones CSS3 en el sitio web IE Test Drive. La demo funciona en todos los navegadores que soportan CSS3 Transitions, como es el caso de IE10 en la versión Preliminar de Desarrollo de Windows.

Animaciones

Las Animaciones de CSS3 son conceptualmente similares a las transiciones, ya que en ambos casos van modificando gradualmente un valor CSS a lo largo de la línea de tiempo. Las diferencias están, primero, en la forma en que se indican las propiedades de la animación; segundo, en la forma en que se disparan y tercero, la complejidad de las animaciones que podemos crear.

Las animaciones se declaran utilizando reglas de “keyframes” dentro del código CSS. Una regla de keyframes sencilla que viene a reproducir el efecto de desvanecimiento que hemos visto en el ejemplo anterior de transición sería más o menos así:

@keyframes

fadeOut {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}

Aplicamos esta regla a nuestra imagen con este fragmento CSS:

img {

    animation-duration: 2s;

    animation-delay: 0s;

    animation-timing-function: linear;

    animation-fill-mode: forwards;

}

img:hover {

    animation-name: fadeOut;

}

Muchas de estas propiedades ya son conocidas de nuestro análisis anterior sobre transiciones. Lo nuevo es esto:

• animation-fill-mode – El valor “forwards” de esta propiedad significa que debe mantener los valores de propiedad indicados en “to” una vez llega al final de la animación avanzando en la línea de tiempo. El valor por defecto de esta propiedad es “none”, que hace que las propiedades vuelvan a sus valores previos a la animación una vez termina el proceso. (Se puede construir este mismo código CSS de ejemplo sin utilizar el valor animation-fill-mode. Basta con añadir “opacity: 0;” a la regla img:hover para mantener el valor de opacidad final a cero.)
• animation-name – informa del qué animación (identificada por su nombre) se desarrollará como consecuencia del evento. Cuando se indica un valor en la propiedad animation-name primero se ejecuta la cuenta atrás definida por el valor animation-delay. Cuando esta cuenta llega a cero, empieza la animación propiamente dicha y lo hace durante el tiempo indicado por el valor animation-duration. El valor de animation-timing-function es el mismo que transition-timing-function descrito antes.

La potencia de las Animaciones CSS3 radica en su capacidad para especificar múltiples keyframes con propiedades y valores intermedios que no tienen por qué quedar delimitados por los valores inicial y final. En las Transiciones CSS3, los valores intermedios siempre van en progresión desde el inicio al final; nunca pueden salirse del rango. En las animaciones no tenemos esta restricción.

Así podemos programar una “expansión” como la que se consigue con este ejemplo y el código siguiente.

#bouncingImage {

    width: 400px;

    height: 267px;

    box-shadow: 2px 2px 5px 0px gray;

    animation-duration: 2s;

    animation-timing-function: ease-in-out;

    animation-fill-mode: forwards;

}

#bouncingImage:hover {

    animation-name: zoomInBounce;

}

@keyframes zoomInBounce {

    from {

    transform: scale(1);

    }

    30% {

    transform: scale(1.4);

    }

    40% {

    transform: scale(1.15);

    }

    50% {

    transform: scale(1.35);

    }

    60% {

    transform: scale(1.2);

    }

    70% {

    transform: scale(1.3);

    }

    80% {

    transform: scale(1.225);

    }

    90% {

    transform: scale(1.275);

    }

    to {

    transform: scale(1.25);

    }

}

Mueve el cursor sobre la imagen para ampliarla con un efecto expansivo.

Puedes ver una demo interactiva de Animaciones CSS3 en el sitio web IE Test Drive. La demo funciona en todos los navegadores que soportan Animaciones CSS3, como es el caso de IE10 que se incluye en la Preliminar de Desarrollo de Windows .

Dale un estilo personal a tus sitios web

Estos dos ejemplos que hemos visto en este artículo probablemente no son los que vayas a utilizar más a menudo en tus páginas web. Pero unas transiciones y animaciones bien diseñadas son hoy en día algo que se considera casi obligatorio en cualquier experiencia web moderna. Windows 8 estilo Metro utiliza profusamente animaciones fluidas y sutiles para que los usuarios entiendan mejor sus interacciones con el sistema. Gracias a ellas Windows 8 estilo Metro y sus aplicaciones ofrecen una excelente respuesta con interfaz táctil.

Espero que los ejemplos mostrados, las demos de IE Test Drive y el creciente número de artículos y ejemplos que vemos por todas partes en la Web te ayuden a profundizar en esta nueva tecnología y a darle un toque personal a tus diseños.

FUENTE: Ted Johnson - https://blogs.msdn.com/b/ie/archive/2011/11/21/adding-personality-with-css3-transitions-and-animations.aspx

 

Saludos,

El equipo de MSDN España