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:

Origen de la transformación

Existe la propiedad transform-origin que permite especificar el punto desde el que se ejecuta la transformación. Por defecto es el centro del elemento.

Esto es muy útil por ejemplo para rotaciones para que no rote respecto al centro de la imagen. 

.cuadrado--rotate-centro {
  transform: rotate(360deg);
  transform-origin: 50% 50%;
}


.cuadrado--rotate-esquina-superior-izquierda {
  transform: rotate(360deg);
  transform-origin: 0 0;
}


<!DOCTYPE html>
<html>
  <head>
    <title>transform-origin</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>

    </style>

    <style>
        .l-center {
            display: grid;
            place-items: center;
            width: 100%;
            height: 50vw;
        }

        .c-cuadrado {
            border: 1px solid red;
            background: lightpink;
            width:200px;
            height: 200px;
            transition: transform 4s;
            transform-origin: 0 0;
        }

        .c-cuadrado:hover {
            transform: rotate(360deg);
        }


    </style>
  </head>

  <body>
        <div class="l-center" >
          <div class="c-cuadrado">Hola mundo</div>
        </div>
  </body>
</html>

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:

Movimiento de una campana

En este apartado podéis ver el movimiento real que haría una camapana. Para hacer el movimiento real se han usado las fórmulas físicas que describen el movimiento de dicha campana. Está con rozamiento y sin él.

El ejemplo es gracias a Àngela Hermosilla, licenciada en físicas y estudiantes de este ciclo de DAW.

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: