Tabla de Contenidos

8. Animaciones

En este tema vamos a hablar de 3 cosas distintas:

A veces nos referiremos a animaciones con el significado de hacer que las cosas se muevan en la pantalla y no al API de animaciones de CSS. Aunque realmente las animaciones no es solo que las cosas se muevan , se puede aplicar a muchas propiedades CSS como colores, opacidad, etc.

¿Que podemos hacer con animaciones? Veamos algunos ejemplos de animaciones usando solo CSS:

Lo mas importante de las animaciones es usarlas cuando tengan sentido y no solo como una moda o capricho. Es decir hay que usarlas cuando aportan algo al usuario. Un artículo que lo explica muy bien es el siguiente: Ground Rules for Web Animations.

Mas información:

Transformaciones

Las transformaciones es simplemente usar una nueva propiedad de CSS llamada transform.

Esta propiedad es como cualquier otra de CSS y no tiene nada que ver con las animaciones , aunque se suele usar bastante con ellas, por eso se explica aquí.

Esta propiedad CSS permite hacer lo siguiente sobre un elemento:

El listado de opciones es el siguiente:



Vamos ahora unos ejemplos: 

div {
  transform: translate(50px, 100px);
}




div {
  transform: rotate(20deg);
}




div {
  transform: scale(2, 3);
}




div {
  transform: scale(0.5, 0.5);
}




div {
  transform: skew(20deg, 10deg);
}




div {
  transform: translate(50px, 100px) rotate(20deg);
}



Las transformaciones que hemos visto con en 2 dimensiones. CSS también permite transformaciones en 3D.

El listado de opciones es el siguiente:

Mas información:

Transiciones

Las transiciones se usan sobre todo para hacer cambios en los eventos de :

Mas información:

Veamos un ejemplo con :hover y después le vamos a añadir la transición para mejorarlo visualmente. 

<!DOCTYPE html>
<html>
    <head>
      <style>
        .c-button {
          padding: 10px 20px 10px 20px;
          background-color: #ffffff;
          border: 1px solid #bbd4f7;
          border-radius: 4px;
          cursor: pointer;
        }
        
        .c-button:hover {
          background-color: #deebfc;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
      </style>
    </head>
    <body>
      <button class="c-button">Aceptar</button>
    </body>
</html>

En el ejemplo que acabo de poner, al pasar el cursos sobre el botón se añade una sombra y cambia el color de fondo.

Sin embargo el efecto queda mal ya que es muy brusco pasar de:

Para evitar ésto, usamos en CSS la transición de la siguiente forma: 

  transition: background-color 1s, box-shadow 1s;

Con la línea anterior se hace que el cambio del color y añadir la sombra se haga con un transición que durará 1 segundo. Ahora el ejemplo quedaría así: 

<!DOCTYPE html>
<html>
    <head>
      <style>
        .c-button {
          padding: 10px 20px 10px 20px;
          background-color: #ffffff;
          border: 1px solid #bbd4f7;
          border-radius: 4px;
          cursor: pointer;
          transition: background-color 1s, box-shadow 1s;
        }
        
        .c-button:hover {
          background-color: #deebfc;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
      </style>
    </head>
    <body>
      <button class="c-button">Aceptar</button>
    </body>
</html>

Podemos aplicar las transiciones a cualquier propiedad CSS que tenga un rango de valores , como al color, a la sombra o como podíais imaginar a las transiciones.

Por lo tanto , siempre que usemos :hover , :focus , etc, lo normal es añadir una transition: con las propiedades que hemos incluido en el :hover , :focus, etc.

La forma concreta de la propiedad transition es: 

transition: propiedadCSS duracion timing-function retardo

Mas información de la timing-function en:

Por ejemplo: 

  transition: width 3s ease-in-out 2s
Se cambiará el ancho . Durará 3 segundos. Empezará y terminará mas lentamente . Empezará con 2 segundos de retardo.

Como pasa mucho en las propiedades CSS se puede poner también como varias propiedades independientes: 

  transition-property:width;
  transition-duration:3s;
  transition-timing-function:ease-in-out;
  transition-delay:2s;

Animaciones

Las animaciones son similares a las transiciones pero mas potentes además que suelen usarse desde JavaScript.

Mas información:

Las animaciones constan de dos apartados distintos.

Veamos un ejemplo: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .c-cuadrado {
              width: 100px;
              height: 100px;
              background-color: #bbd4f7;
              border-radius: 4px;
            }
            
            .c-cuadrado--girar {
              animation-name: animacion-girar;
              animation-duration: 3s;
            }
            
            
            @keyframes animacion-girar {
              0% {
                transform: rotate(0deg);
                background-color: #bbd4f7;
              }
              
              50% {
                transform: rotate(360deg);
                background-color: #1C4673;
              }
              
              100% {
                transform: rotate(0deg);
                background-color: #bbd4f7;
              }  
              
            }
        </style>
    </head>
    <body>
        <div style="padding:200px">
            <div id="cuadrado1" class="c-cuadrado c-cuadrado--girar">Hola</div>
        </div>
    </body>
</html>

Dentro de @keyframes definimos cada uno de los "fotogramas" que queremos que tenga la animación.

Luego dentro de la clase c-cuadrado--girar indicamos que animación aplicar y sus parámetros. Las propiedades que hay son:

Mas información de la timing-function en:

JavaScript

Para volver a ejecutar la animación desde JavaScript se hace de la siguiente forma: 

function animar() {
	var cuadradoElement=document.getElementById("cuadrado1");
	cuadradoElement.classList.remove("c-cuadrado--girar");
	setTimeout(function() {
		cuadradoElement.classList.add("c-cuadrado--girar");
	},10);
}


<button onclick="animar()">Animar</button>

Es decir que hay que quitar la clase CSS que tiene la animación y volver a ponerla. El problema es que si la quitas y la vuelves a poner , el navegador no se entera. Así que hay que hacer el truco de quitarla , esperar 10 ms con un timeout y añadir la clase.

Mas información:

Animaciones simétricas

La animación que hemos visto , vuelve al mismo sitio. Si queremos una animación que haga eso , no es necesario definir la ida y la vuelta. Es tan sencillo como solo definir la ida y decir que vuelva.

Eso se consigue de la siguiente forma: 

.c-cuadrado--girar {
  animation-name: animacion-girar;
  animation-duration: 1.5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}


@keyframes animacion-girar {
  0% {
	transform: rotate(0deg);
	background-color: #bbd4f7;
  }
  
  100% {
	transform: rotate(360deg);
	background-color: #1C4673;
  } 
  
}

Los cambios que hemos hecho son los siguientes:

Y con éste truco siempre tenemos una animación de ida y vuelta.

Ejercicios

Ejercicio 1

Crea una página web que:

Ejercicio 2

Crea una página web que:

Crea un programa en JavaScript+HTML+CSS que el tamaño de un texto pase de los 12px iniciales a los 30px finales y que tarde 3 segundos.

Ejercicio 3

Crea una página web:

Ejercicio 4

Crea una página web:

Debes probar con distintas animation-timing-function y elegir la que se parezca mas a la caída real de la pelota.

Ejercicio 5

Repite el ejercicio anterior de la torre de pisa pero ahora será una canasta de baloncesto y una pelota de baloncesto.

Otra diferencia es que la pelota al llegar abajo rebotará y volverá hasta arriba del todo y así indefinidamente.

Ejercicio 6

Crea una página web:

Debes probar con distintas animation-timing-function y elegir la que se parezca mas al movimiento rectilíneo uniforme que se tiene en el espacio.

Ejercicio 7

Crea una página web:

Debes probar con distintas animation-timing-function y elegir la que se parezca mas al movimiento acelerado de un coche hasta llegar a una velocidad y luego que sigue con una velocidad constante.

Ejercicio 8

Repite el ejercicio anterior pero ahora el coche irá frenando cuando llegue al final de la carretera.

Ejercicio 9

Crea una página web: