Tabla de Contenidos

Transformaciones
Transiciones
Animaciones
Animaciones simétricas
Ejercicios

¡Esta es una revisión vieja del documento!

8. Animaciones

En este tema vamos a hablar de 3 cosas distintas:

Transformaciones: Es simplemente aplicar alguna transformación espacial a un elemento HTML como moverlo ,rotarlo o agrandarlo.
Transiciones: Es un API de CSS para hacer que las cosas se muevan en la pantalla.
Animaciones: Es otro API CSS mas complejo hacer que las cosas se muevan en la pantalla.

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:

Animaciones y transiciones CSS: Vídeo de Youtube
CSS3: Animations vs. Transitions
Transiciones vs. Animaciones

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:

Moverlo
Escalarlo (Hacerlo mas grande o mas pequeño)
Rotarlo
Distorsionarlo: Es como torce el elemento tanto en el eje X como en el eje Y.

El listado de opciones es el siguiente:

translate(x,y)
translateX(n)
translateY(n)
scale(x,y)
scaleX(n)
scaleY(n)
rotate(angle)
skew(x-angle,y-angle)
skewX(angle)
skewY(angle)

Vamos ahora unos ejemplos:

Mover el elemento 50px en el eje X y 100px en el eje Y

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

Rotar el elemento 20 grados

div {
  transform: rotate(20deg);
}

Hacer el doble de grande el elemento en el eje X y el tripe en el eje Y.

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

Hacer la mitad de grande el elemento tanto eje X como en el eje Y.

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

Distorsiona el elemento 20 grados en el eje X y 10 grados en el eje Y.

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

Tambien se pueden aplicar varias transformaciones a la vez:

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:

translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
perspective(n)

Mas información:

Transiciones

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

:hover
:focus
Etc.

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:

background-color: #ffffff; ⇒ background-color: #deebfc;
box-shadow: none; ⇒ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

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

propiedadCSS: La propiedad CSS a la que se le aplica la transición.
duracion: Duración en segundos de la transición
timing-function: La velocidad de la transición. Sus valores son:
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- step-start
- step-end
- steps(int,start|end)
- cubic-bezier(n,n,n,n): Para generar los valores se puede usar la siguiente página: cubic-bezier
retardo: Cuanto tiempo en segundos tarda en empezar la transición.

Mas información de la timing-function en: transition-timing-function - CSS | MDN y en CSS transition-timing-function property

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.

Las animaciones constan de dos apartados distintos.

La definición de la propia animación con @keyframes.
Los parámetros de la animación con la propiedad animation

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: c-cuadrado-girar;
              animation-duration: 3s;
            }
            
            
            @keyframes c-cuadrado-girar {
              0% {
                transform: rotate(0deg);
                background-color: #bbd4f7;
              }
              
              50% {
                transform: rotate(365deg);
                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:

animation-name: Nombre de la animación a realizar. Es el nombre del @keyframes.
animation-duration: Duración en segundos.
animation-timing-function: La velocidad
- linear: Velocidad constante. e=v*t
- ease
- ease-in: Aceleración constante e=½a*t²
- ease-out
- ease-in-out
- step-start
- step-end
- steps(int,start|end)
- cubic-bezier(n,n,n,n): Para generar los valores se puede usar la siguiente página: cubic-bezier
animation-delay: Retraso en segundos en empezar la animación
animation-iteration-count: Nº de repeticiones de la animación. Se puede usar infinite para que nunca acabe.
animation-direction: Si va desde el principio al final o al revés, etc.
- normal: Empieza en el 0% y avanza hacía el 100%
- reverse: Empieza en el 100% y avanza hacía el 0%
- alternate: Empieza en el 0% y avanza hacía el 100% y la 2º vez lo hace del 100% al 0% y así sucesivamente.
- alternate-reverse: Empieza en el 100% y avanza hacía el 0% y la 2º vez lo hace del 0% al 100% y así sucesivamente.
animation-fill-mode: Que CSS se aplica cuando acaba.
- none
- forwards
- backwards
- both
animation-play-state: Como empieza la animación
- running: Empieza ejecutándose
- paused: Empieza pausada
animation: La unión de todas las anteriores

JavaScript

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>

Timeout

Mas información:

Ejercicios

Ejercicio 1

Crea un programa en JavaScript+HTML+CSS que un rectángulo rojo vaya modificando el ancho desde lo 100px a los 600px y que tarde 4 segundos

Ejercicio 2

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

Modifica el anterior ejercicio para que la animación solo se haga al pulsar un botón

Ejercicio 4

Modifica el anterior ejercicio para que se haga grande al pulsar el botón pero si lo vuelves a pulsar que se haga otra vez pequeño

logongas

Barra lateral

Tabla de Contenidos

8. Animaciones

Transformaciones

Transiciones

Animaciones

JavaScript

Ejercicios

Ejercicio 1

Ejercicio 2

Ejercicio 3

Ejercicio 4

logongas

Herramientas de usuario

Herramientas del sitio

Barra lateral

Tabla de Contenidos

8. Animaciones

Transformaciones

Transiciones

Animaciones

JavaScript

Ejercicios

Ejercicio 1

Ejercicio 2

Ejercicio 3

Ejercicio 4

Herramientas de la página