Ejercicio Feed-Back
Asignatura Programación Web
Animaciones con CSS3

Zepelin volando

Foto Paisaje Imagen Zeppelin

Fundamentos de la animación con CSS
Alumno: Miguel Ezquerra

Para llevar a cabo este ejercicio únicamente se han utilizado una serie de instrucciones css mediante las cuales podemos modificar el aspecto, ubicación, y dotar de movimiento, a cualquiera de los elementos que escojamos dentro de un documento html.

En este caso tanto a la imagen del zepelin como a la foto del paísaje de fondo se les ha aplicado una animación css. Pero antes de comenzar a modificar los valores de estas animaciones es importante tener en cuenta el valor del atributo "position" que tendremos que asignar a cada uno de los elementos que intervendrán en las animaciones a realizar.

El atributo "position" del zepelin tendrá un valor "absolute", ya que nos interesa que se mueva libremente por el documento html, en este caso siempre sin que se salga del área de la fotografía de fondo. En cuanto a la fotografía del paísaje de fondo, el valor que le aplicaremos al atributo "positión" será "relative".

También es importante indicar que las dos imagenes, tanto la del zepelin como la del paísaje, están ubicadas dentro de un <div> al que se le ha asignado el id "viewfinder". Dicho <div> tiene la misma altura que la foto del paísaje que contiene, pero es mucho menos ancho que dicha foto. Al añadirle la propiedad "overflow: hidden" el <div> no permitirá ver la anchura total de la foto que contiene, y será precisamente este efecto de ventana el que nos permitirá lograr la animación de la foto del paísaje de fondo. Otro punto clave que hace referencia a este <div> es que se le ha aplicado un "position: relative", por lo que las coordenadas de ubicación del zepelin (que está en su interior) siempre estarán en relación a este <div>, y no al tamaño total de la página html.

Elementos html que se van a animar
Código html correspondiente a los elementos de la animación
Propiedad position del div que contiene las dos imagenes a animar
Valor de la propiedad "position" del div que contiene las dos imagenes a animar

Por otro lado, para llevar a cabo las animaciones del zepelin y del paísaje tendremos que definir, dentro del grupo de atributos css que les asignaremos a cada una de estas dos imágenes, las siguientes propiedades css: animation-name, animation-duration, animation-iteration-count y animation-timing-function. El primer atributo nos permitirá darle un nombre a la animación del elemento en cuestión, pudiendo de esta manera referirnos a ella en el caso de que queramos añadir keyframes para modificarla y personalizarla. El segundo valor nos permitirá fijar cual es la duración de la animación en segundos. El tercer valor nos permitirá escoger la cantidad de veces que se repetirá la animación, si por ejemplo a este atributo le adjudicamos el valor "infinite" la animación se repetirá en bucle como sucede en este ejercicio. Por último, la cuarta instrucción nos permitirá establecer la velocidad con la que se va a llevar a cabo la animación, siendo dicha velocidad uniforme en el caso de que le adjudiquemos el valor "linear", o pudiendo sufrir variaciones de velocidad al comienzo, a la mitad o al final de la animación, según lo indiquemos mediante los diferentes valores preestablecidos en css: ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps (int,start|end), cubic-bezier (n,n,n,n),... Incluso podremos hacer que la animación comience con un pequeño tiempo de retardo gracias a la propiedad animation-delay.

Atributos css para la imagen del zepelin
Atributos css para la imagen del zepelin
Atributos css para la imagen del paisaje
Atributos css para la imagen del paisaje

A parte de todos los parámetros que definirán la velocidad y la frecuencia de repetición de la animación que pensamos realizar, también podremos añadir keyframes, que son puntos de control de la animación, que nos permiten modificar las propiedades css del elemento sobre el cual estamos actuando en momentos concretos de la animación. Dichas modificaciones pueden tener efecto sobre númerosas propiedades css del elemento en cuestión, como por ejemplo sobre los margenes superior, inferior y laterales que definien su posición dentro del <div> donde se encuentra, o respecto a su "background-color", si es que tiene definida esta propiedad, o el tamaño de la fuente ("font-size"), en el caso de que el elemento que estamos animando sea un texto. Otra instrucción css que nos permitirá realizar modificaciones en cuanto a la forma, la escala, la rotación y la posición en pantalla de un elemento será la propiedad "transform", ya que esta instrucción puede adoptar gran cantidad de variantes:

- transform: translate (x, y): Mediante esta instrucción podremos modificar la posición de cualquier elemento dentro del documento html, pasándole las coordenadas "x" e "y" de su nueva ubicación.

- transform: rotate (angúlo): Nos permite rotar un elemento del documento html según el valor, en grados, que pasemos entre paréntesis.

- transform: skew (angúlo-x, angúlo-y): Utilizando la instrucción skew podremos deformar el elemento sobre el que actuemos, en mayor o menor medida, en base a los angúlos que indiquemos.

- transform: scale (x, y): También podremos modificar la escala del elemento escogido utilizando "scale" y pasando como parámetros los valores de los ejes "x" e "y" a modificar.

Para concluir este repaso sobre como crear animaciones mediante css conviene explicar brevemente como se usan los keyframes. Gracias a ellos podremos personalizar la progresión de la animación que queremos realizar. Para utilizarlos solo es necesario hacer alusión al nombre de la animación que queremos modificar y establecer los cambios en los estilos css del elemento animado para cada momento de la animación. Los diferentes estados de la animación se establecerán como un porcentaje de la duración total de la misma, por lo que el segundo 1 de una animación de 10 segundos estará representado por el valor 10%.

Keyframes de la animación
Utilización de keyframes en la animación de la imagen del zepelin