¡Esta es una revisión vieja del documento!
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*tease
ease-in
: Aceleración constante e=½a*t²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-bezierMas 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 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: 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 velocidadlinear
: Velocidad constante. e=v*tease
ease-in
: Aceleración constante e=½a*t²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
forwards
backwards
both
animation-play-state
: Como empieza la animaciónrunning
: Empieza ejecutándosepaused
: Empieza pausadaanimation
: La unión de todas las anterioresPara 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: c-cuadrado-girar; animation-duration: 1.5s; animation-iteration-count: 2; animation-direction: alternate; } @keyframes c-cuadrado-girar { 0% { transform: rotate(0deg); background-color: #bbd4f7; } 100% { transform: rotate(365deg); 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 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
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.
Modifica el anterior ejercicio para que la animación solo se haga al pulsar un botón
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