En este tema vamos a hablar de 3 cosas distintas:
¿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:
Las transformaciones es simplemente usar una nueva propiedad de CSS llamada transform
.
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:
Las transiciones se usan sobre todo para hacer cambios en los eventos de :
:hover
:focus
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
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)
Mas información de la timing-function en:
Por ejemplo:
transition: width 3s ease-in-out 2sSe 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;
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.
@keyframes
.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 velocidadlinear
: 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-bezieranimation-delay
: Retraso en segundos en empezar la animaciónanimation-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 Propertiesrunning
: Empieza ejecutándosepaused
: Empieza pausadaanimation
: La unión de todas las anterioresMas información de la timing-function en:
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:
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:
animation-duration: 1.5s;
animation-iteration-count: 2;
animation-direction: alternate;
Y con éste truco siempre tenemos una animación de ida y vuelta.
Crea una página web que:
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.
Crea una página web:
input
de tipo text
de fondo banco, bordes sin redondear.input
vuelva a su etilo original.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.
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.
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.
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.
Repite el ejercicio anterior pero ahora el coche irá frenando cuando llegue al final de la carretera.
Crea una página web: