logongas

Herramientas de usuario

Herramientas del sitio

Ocultar Menú
Traza: • 8. Animaciones

Barra lateral

clase:daw:diw:2eval:tema08

Tabla de Contenidos

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:

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:

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.

  • Rotar respecto al centro de la imagen (por defecto):

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

  • Rotar respecto a la esquina superior izquierda:

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

  • Ejemplo completo con transiciones:

<!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 :

  • :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: Velocidad constante. $e=v \cdot t$
    • ease
    • ease-in: Aceleración constante. $e=\frac{1}{2} \cdot a \cdot t^{2}$
    • ease-out
    • ease-in-out
    • steps(pasos)
    • cubic-bezier(n,n,n,n)
  • retardo: Cuanto tiempo en segundos tarda en empezar la transición. Por ejemplo en hover, lo correcto es hacer que no empiece la animación enseguida ya pasando rápido el curso se empieza a hacer y queda feo si no nos detenemos. Por eso hay que poner un retardo de al menos 0.3s

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.

  • 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: 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:

  • 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 \cdot t$
    • ease
    • ease-in: Aceleración constante $e=\frac{1}{2} \cdot a \cdot t^{2}$
    • ease-out
    • ease-in-out
    • steps(pasos)
    • 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: La animación antes de empezar o despues de acabar no tiene ningún estilo definido en la animación.
    • forwards: Al acabar la animación se queda como en el último Frame.
    • backwards: Antes de empezar la animación (por si hay un delay), ya está como en el primer Frame.
    • both: Es unir forwards y backwards.
  • animation-play-state: Como empieza la animación. Mas información en How to Play and Pause CSS Animations with CSS Custom Properties
    • running: Empieza ejecutándose
    • paused: Empieza pausada
  • animation: La unión de todas las anteriores

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:

  • Hacemos que la animación dure la mitad: animation-duration: 1.5s;
  • Pero hacemos que la haga 2 veces: animation-iteration-count: 2;
  • Por último hacemos que la segunda vez la haga al revés: animation-direction: alternate;

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

Ejercicios

Ejercicio 1

Crea una página web que:

  • Muestre un cuadrado rojo de 200px de lado.
  • Que al poner el cursor encima gire 45 grados y cambie su color a azul.
  • Que al quitar el curso vuelva a su posición y su color original.
  • Que dure 2 segundos.

Ejercicio 2

Crea una página web que:

  • Muestre un cuadrado rojo de 200px de lado.
  • Que al poner el cursor encima se cambia su ancho para ocupar 600px
  • Que al quitar el curso vuelva a su tamaño original.
  • Que dure 3 segundos.

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:

  • Que el fondo sea gris claro.
  • Muestre un input de tipo text de fondo banco, bordes sin redondear.
  • Que al poner el curso sobre él para escribir, se hagan los bordes redondeados, el color de fondo sea un azul muy clarito, se añada una sombra suave de color azul.
  • Que al quitar el curso el input vuelva a su etilo original.
  • Que dure 1 segundo.

Ejercicio 4

Crea una página web:

  • En el fondo se verá una foto con la torre de pisa.
  • Que sobre el borde superior de la torre coloques la imagen de una pelota.
  • Que al pulsar un botón se active una animación que deje caer la pelta hasta el suelo y al acabar se quede ahí.
  • Si se vuelve a pulsar el botón, repetirá la animación.
  • La duración de la animación será de 9,4s (Es lo que tardaría en caer una pelota desde la torre de pisa suponiendo que no hay rozamiento)

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:

  • En el fondo se verá una foto del espacio y de la Estación Espacial Internacional (IIS).
  • Que sobre algún lado de la IIS coloques la imagen de un astronauta.
  • Que al pulsar un botón se active una animación que nueva el astronauta durante 1000px y al acabar se quede ahí.
  • Si se vuelve a pulsar el botón, repetirá la animación.
  • La duración de la animación será de 5s

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:

  • En el fondo se verá una foto de una carretera recta vista desde arriba.
  • Que sobre el inicio de la carretera coloques la imagen de un coche visto desde arriba.
  • Que al pulsar un botón se active una animación que nueva el coche hasta llegar al final de la carretera y al acabar se quede ahí.
  • Si se vuelve a pulsar el botón, repetirá la animación.
  • La duración de la animación será la necesaria para que de sensación de realidad.

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:

  • Que muestre un botón que tenga con el texto "Registrarse" y un icono de un usuario (usar Font Awesome).
  • Que cuando pasen 20 seg desde la carga de la página, se lance una animación que haga que el icono se haga un poco mas grande y tenga "mas" color de forma que resalte.
  • La animación no se debe ejecutar si el usuario antes ha pulsado el botón.
  • Al acabar la animación el icono se quedará como estaba
  • La animación debe durar 2s.
clase/daw/diw/2eval/tema08.txt · Última modificación: 2025/02/13 11:47 por admin

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki