Taller de animación CSS 3, en el que creamos un fondo donde simulamos que están cayendo copos de nieve, utilizando tan sólo con CSS 3.
En estos momentos estamos ofreciendo varios ejemplos prácticos sobre cómo crear distintos tipos de animaciones CSS. En el presente artículo veremos un ejemplo de fondo con copos de nieve que caen por nuestra pantalla, con movimientos de forma ondulante. Es un ejemplo parecido al que hicimos anteriormente, en el artículo sobre el fondo de Matrix, pero en esta ocasión en vez de hacer movimientos rectos en la vertical, serán movimientos curvos.
De modo que, la complicación adicional en esta práctica será realizar esos movimientos circulares típicos de los copos de nieve, para los que vamos a enseñar una nueva propiedad de las animaciones CSS, transform, a la que se accede en el momento de escribir este artículo con la propiedad temporal -webkit-transform, que está disponible para navegadores como Chrome o Safari. Dicho sea de paso, aprender esta propiedad nos vendrá muy bien porque dará mucha opciones a la hora de animar objetos.
Como hacemos en estos ejercicios prácticos, lo primero que recomendamos hacer es ver el ejemplo funcionando en una página aparte, donde se podrá apreciar el resultado final de la práctica que pretendemos realizar.
Ahora vamos a ver el código CSS necesario para crear nuestro fondo. El cual será reducido, pero donde simplemente tenemos que aumentar los tamaños para sacar el mismo resultado en un fondo mayor.
#container{
background: #666 url(images/fondo-nieve.jpg) no-repeat;
width: 400px;
height: 300px;
position: relative;
}
A continuación damos propiedades al conjunto de la nieve en general y luego a cada copo en particular.
@-webkit-keyframes nieve{
from {top: -10px;}
to {top: 450px;}
}
@-webkit-keyframes copos{
0% { -webkit-transform: rotate(-180deg) translate(0px, 0px);}
100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}
}
Con el primero decidimos que los copos vayan de la parte superior a la inferior, del tal forma que parezca que aparecen por arriba y desaparecen por abajo.
En el segundo lo que le decimos es que cada copo va ir girando haciendo una semicircunferencia, saliendo el copo desde 10px para finalizar en 75px.
Una vez que tenemos ya nuestros fotogramas clave nos queda darle propiedades a nuestras animaciones. Para ello creamos un estilo para las animaciones nieve y copos y a parte, una serie de estilos para cada copo en particular. Aquí, como en el ejercicio anterior, podemos crear todos los copos que necesitemos.
#snow div {
position: absolute;
top: -40px;
-webkit-animation-name: nieve, copos;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in;
}
.copos {
color: #fff;
font-size: 1em;
position: absolute;
}
.copos.f1 {
left: 40px;
-webkit-animation-duration: 5s;
}
.copos.f2 {
font-size: 1.8em;
left: 120px;
-webkit-animation-duration: 7s;
}
.copos.f3 {
left: 200px;
-webkit-animation-duration: 8s;
}
.copos.f4 {
font-size: 1.5em;
left: 280px;
-webkit-animation-duration: 6s;
}
Considero que no hace falta explicar este código, que ya hemos visto en los ejemplos anteriores de nuestro manual, por lo que paso a poneros el código HTML necesario para que nuestro fondo funcione.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Fondo animado con CSS</title>
<link rel="stylesheet" href="nieve.css" type="text/css">
</head>
<body>
<div id="container">
<div id="snow" class="snow">
<div class="copos f1">?</div>
<div class="copos f2">?</div>
<div class="copos f3">?</div>
<div class="copos f4">?</div>
</div>
<div id="ground"></div>
</div>
</body>
</html>
De este código cabe destacar que no hemos utilizado imágenes para generar los copos de nieve, simplemente hemos colocado el código HTML que nos muestra el símbolo copo.
Podéis volver a ver el ejemplo funcionando en una pagina aparte.
En el siguiente artículo veremos cómo animar un muñeco para ir haciendo algo más que fondos animados.