Animaciones en CSS3

jueves 21 abril de 2016 BlogUneWeb Integración Web

Animaciones en CSS3

Las animaciones CSS nos permiten realizar efectos que hasta ahora estaban sólo disponibles con otros tipos de tecnologías. Veremos los principales aspectos a conocer sobre las animaciones CSS 3.

Como todos posiblemente sepamos, hasta el momento, las animaciones en las páginas web siempre se tenían que realizar utilizando diversas tecnologías accesorias, más allá del simple HTML o CSS. El primer sistema que alcanzó gran popularidad para realizar una animación de elementos bastante fluida y espectacular fue la tecnología Flash y luego le acompañaron algunos otros sistemas como Silverlight, de características similares. Sin embargo, todo esto son tecnologías propietarias, que requieren la instalación de un plugin para funcionar en el navegador, lo que impide que sean universales, por mucha aceptación que hayan llegado a tener.

Paralelamente existen varios otros soportes para animación que sí forman parte de las tecnologías de creación de páginas web universales, pero que no llegan ni de lejos a las posibilidades de animación que podríamos desear. Nos referimos a los GIF animados, que tanto se utilizaron al principio y que ahora están prácticamente olvidados, así como a Javascript que también permite hacer animaciones a base de cambiar atributos CSS de manera progresiva a lo largo de un tiempo.

Bien, pues con CSS 3 viene una nueva forma de realizar animaciones totalmente novedosa y que resultará mucho más sencilla que el uso que podemos conocer con Javascript. Pero lo que es más importante, que soporta muchos más tipos de animación que hasta ahora estaban reservados a tecnologías como Flash, como pueden ser rotaciones, ampliaciones y reducciones del tamaño vectoriales, etc.

Esto no se queda ahí, ya que además se han implementado una ciertas interacciones con el usuario y que se consiguen únicamente con CSS 3. Además, todo ello sin tener que programar, lo que puede resultar mucho más agradable y al alcance de los desarrolladores menos técnicos.

Ventajas de las animaciones CSS 3

Las animaciones CSS permiten hacer muchas de las cosas que antes teníamos reservadas sólo al uso de tecnologías supletorias, que no hacían más que incrementar la dificultad del desarrollo, limitar su compatibilidad entre distintos tipos de usuarios y plataformas, así como los requisitos de conocimientos del desarrollador para poder incorporarlas.

Por tanto, una de las ventajas es que nos podemos olvidar de Flash si queremos hacer dinamismos espectaculares en nuestra web. Dejar a Flash de lado además implica que no tenemos que preocuparnos por el posicionamiento de la página que tantos quebraderos de cabeza provoca cuando nuestra web esta creada en enteramente en Flash. Todo esto sin entrar en el tema de la accesibilidad, en el que Flash es un verdadero quebradero de cabeza.

Pero, como dejábamos entrever, las ventajas más importantes serían la compatibilidad y la facilidad de implementación, al usar un lenguaje que ya resulta familiar para el desarrollador. La compatibilidad viene dada por por el uso de un sistema abierto y regulado por el W3C, al que todos los navegadores tarde o temprano se adaptarán. Y la facilidad de desarrollo porque sólo trabajaremos en nuestros sitios con el lenguaje CSS y no existirá la necesidad de dominar otros lenguajes de programación como ocurría con Flash.

Conceptos básicos para la animación CSS

Seguimos con el tema de las animaciones CSS y repasamos los conceptos y propiedades más básicas para poder crear una animación simple con CSS 3.

Fotograma clave

Los fotogramas claves son valores iniciales y finales que debe tener la animación CSS. Estas localizaciones, en teoría, las sabemos a ciencia cierta, es decir, siempre conocemos en que punto vamos a empezar y en cual vamos a terminar la animación, así como su duración. Pero podemos crear otros fotogramas clave, no solamente los de inicio y fin, que correspondan con puntos intermedios del movimiento. Las reglas que determinan estos valores es lo que llamamos fotogramas clave dentro de CSS.

Su sintaxis sería algo parecido a esto:

@keyframes ‘nombre_fotograma_clave’ {

0% {
left: 100px;
}

40% {
left: 150px;
}

60% {
left: 75px;
}

100% {
left: 100px;
}

}

Esta animación estaría compuesta de 4 fotogramas clave, el porcentaje es en el momento de la animación en el que va a producirse ese fotograma y los px son la longitud y la alineación donde se colocaría el fotograma dentro del DIV en que se encaje.

El código de dicho DIV sería el siguiente:

DIV {
animation-name: ‘nombre-fotograma-clave’;
animation-duration: 45s;
animation-iteration-count: 10;
}

Los atributos de estilo para esta capa que se ven en el código anterior son los siguientes:

animation-name: el nombre del fotograma clave.
animation-duration: la duración de la animación.
animation-iteration-count: la veces que se repite.

Propiedades sobre la animación aplicables en el DIV

Además de las propiedades que hemos citado en el párrafo anterior, tenemos otra serie de atributos que se pueden aplicar a la animación y que se colocan en el DIV.

Esta sería una lista de las propiedades adicionales, aplicables para definir las animaciones que especificamos en el DIV:

animation-timing-function: se aplica entre los fotogramas clave, no sobre toda la animación y describe como progresa la animación a lo largo de un ciclo.
animation-direction: esta propiedad define el sentido de la animación. Si especificamos “alternate” y los ciclos de iteraccion son impares, la animación irá en la dirección normal, si no, se realizará en la dirección inversa
animation-delay: propiedad que nos indica el momento en el que comenzará la animación. Si el valor es 0 se ejecuta en cuanta se carga la página.
animation: esta propiedad combina las anteriores de una forma resumida.

Código completo para una animación CSS

A continuación veremos un código CSS donde estamos definiendo una animación, aunque todavía hay algunas cosas que tenemos que contaros antes de hacer nuestra primera página de prueba. Pero de momento aquí tenéis un ejemplo utilizando el fotograma clave y las propiedades de una animación:

DIV {
animation-name: ‘movimiento-diagonal’;
animation-duration: 5s;
animation-iteration-count: 10;
}

@keyframes ‘movimiento-diagonal’ {
from {
left: 0;
top: 0;
}

to {
left: 100px;
top: 100px;
}
}

Este ejemplo lo que nos mostraría seria una animación en la que se mueve un elemento de la esquina inferior izquierda a la esquina superior derecha, ese movimiento va a tardar 5 segundos y se va a repetir 10 veces.

Animación de un texto con CSS 3

Realizamos un ejemplo básico de animación CSS 3 sobre una capa con un simple texto. Veremos cómo hacer funcionar este primer ejemplo de animación CSS en navegadores basados en Webkit.

En este artículo vamos a realizar nuestro primer ejemplo de animación CSS. Veremos que todo es bastante sencillo y que con unas pocas líneas de código CSS se pueden hacer cosas bastante interesantes. Por lo menos, para los que hayan estudiado un poco sobre la animación realizada con otras tecnologías como Javascript, quedará claro que las animaciones CSS son mucho más fáciles y rápidas de producir.

Lo primero que tenemos que hacer es crearnos nuestros fotogramas clave, para ello utilizamos el siguiente código en nuestra hoja de estilos.

@-webkit-keyframes movimiento-diagonal {
from {
left: 0px;
}

to {
left: 100px;
}
}

Como ya se comentó anteriormente, lo que se ha definido en el código anterior es un par de fotogramas clave, que corresponden con el inicio y el fin de la animación. En la práctica ésto hace que se nos mueva nuestro texto, de izquierda a derecha de 0px a 100 px.

Una vez que tenemos este primer paso, vamos a darle las propiedades necesarias a la capa DIV, para terminar de definir nuestra animación:

#anim {
-webkit-animation-name: movimiento-diagonal;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;/*para que vuelva a su posicion inicial */
width: 100px;
background-color: Teal;
color: #fff;
position: relative;
padding: 2px;
}

En la primera linea le damos el nombre a la animación, que tiene que ser el mismo que el del fotograma clave.

En la segunda le damos una duración de 3 segundos, es decir, la animación tardará en hacer el recorrido sólo 3 segundos.

En la tercera le decimos que lo repita infinitas veces.

La propiedad -webkit-animation-direction: alternate hace que el texto, una vez que haga el recorrido, vuelva a su posición inicial realizando el camino inverso.

Y por último le damos un ancho, y color de fondo y de texto, así como una posición relativa, ya que de lo contrario no funcionaria nuestra animación.

Con esto nuestro código CSS estaría completo, ahora sólo nos quedaría el código HTML que sería tan simple como esto:

<html>
<head>
<title>Animacion CSS 3</title>
<link rel=”stylesheet” href=”animacion-css.css” type=”text/css”>
</head>
<body>

<div id=”anim”>Esto es una animación</div>

</body>
</html>

Código completo de este ejemplo a continuación:

animacion-css.css

@-webkit-keyframes movimiento-diagonal {
from {
left: 0px;
}

to {
left: 100px;
}
}

animacion-css.html

<html>
<head>
<title>Animacion CSS 3</title>
<link rel=”stylesheet” href=”animacion-css.css” type=”text/css”>
</head>
<body>

<div id=”anim”>Esto es una animación</div>

</body>
</html>

Álbum con efectos en CSS 3

Creamos un álbum de fotos con estilos impactantes de CSS 3 y animación, sin utilizar Javascript o jQuery.

Este ejemplo, que verán que es relativamente sencillo, hace años sería muy complicado de hacer y tendríamos que emplear (aparte de HTML y CSS) muchas líneas de código y conocimientos avanzados de Javascript o de algún framework como jQuery. Es una muestra excelente de cómo CSS 3 sustituirá a Javascript en algunas parcelas de sus usos habituales.

En este caso lo primero que vamos a ver va a ser nuestro código HTML, para ir viendo los cambios que vamos realizando según vamos metiendo propiedades a nuestro CSS.

Lo primero que tenemos son las imágenes fijas en nuestro HTML.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>
<head>
<title>Álbum de fotos con CSS</title>
<link rel=”stylesheet” href=”album.css” type=”text/css”>
</head>

<body>

Con esto, tan sólo nos aparecerían todas las imágenes en una lista, sin estilos y sin nada. Entonces lo primero que vamos a hacer es darle un estilo a la etiqueta <UL> dejándola así: <UL class=fotos>

Y ese estilo lo definimos con el siguiente código CSS:

ul.fotos {
width: 970px;
margin: 0 0 18px -30px;
}
ul.fotos li {
display: inline;
}
ul.fotos a {
display: inline;
float: left;
margin: 0 0 27px 30px;
width: auto;
padding: 10px 10px 15px;
text-align: center;
color: #333;
font-size: 18px;
}
ul.fotos img {
display: block;
width: 190px;
margin-bottom: 12px;
}

Esto lo único que hace es darle un ancho a nuestro álbum, y redimensiona nuestras imágenes para que todas tengan el mismo tamaño inicial. Todavía no hemos animado nada, vamos paso a paso.

Ahora vamos a ver qué pasa si le damos más estilos a los <li>, pero esta vez tenemos que crear un enlace, aunque no apunte a ningún sitio para poder darle animación a nuestras imágenes. El enlace luego puede ir a la ampliación o a otro sitio, etc.

</ul>

Para que nos salgan los títulos de las fotos tenemos que poner el atributo title en el enlace y no en la imagen.

Los nuevos estilos CSS serían los siguientes:

ul.fotos a:after {
content: attr(title);
}

Este estilo junto con las siguientes lineas que añadiríamos al estilo “ul.fotos a”, nos mostrarían una caja y el título de cada foto. Las líneas que tenemos que añadir son las siguientes:

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-webkit-transform: rotate(-2deg);
-webkit-transition: -webkit-transform .15s linear;

Estos estilos son para la colocación de las cajas:

ul.fotos li:nth-child(3n) a {
-webkit-transform: none;
position: relative;
top: -5px;

}
ul.fotos li:nth-child(5n) a {
-webkit-transform: rotate(5deg);
position: relative;
right: 5px;

}

ul.fotos li a:hover {
-webkit-transform: scale(1.25);
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
position: relative;
z-index: 5;
}

Con estos estilos lo que le decimos es que nos rote las fotos x grados y que cada 3 una la ponga recta, después en la 5 la rote algo más que las otras. Estos estilos podríamos hacerlos para infinidad de imágenes, buscando cada cuantas fotos queremos rotar o poner rectas. Además el último estilo nos hace que al pasar el ratón por la imagen, esta se agrande con scale y se ponga recta si estaba rotada.

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información

Animaciones en CSS3

Comparte esto:

Entradas relacionadas