Aprende como crear animaciones para tus elementos con CSS3 y dale vida a tus sitios web.
Las animaciones css nos permiten modificar el estilo de los elementos de la web de una forma animada, consiguiendo de esta forma un diseño mucho más dinámico y atractivo. Con las transiciones de css podemos hacer cosas parecidas pero nunca a un nivel tan específico como las animaciones, ya que con estas últimas, podemos controlar en cualquier momento el estado de la animación.
Es recomendable el uso de prefijos para mantener la compatibilidad con navegadores más antiguos.
Propiedades CSS3 para Animaciones
Animation-name: Nombre de la animación.
Animation-duration: Duración de la animación en segundos o milisegundos. Si queremos desactivar la animación, ponemos 0.
Animation-timing-function: Especifica la curva de velocidad de la animación, es decir, si queremos que mantenga una velocidad constante, o un comienzo o final rápido, lento, etc.
- Linear: Mantiene la misma velocidad de principio a fin.
- Ease: Comienzo lento, luego rápido y termina lento.
- Ease-in: Comienza lento, y después mantiene velocidad.
- Ease-out: Mantiene velocidad con un final lento.
- Ease-in-out: Comienzo y fin lentos, muy similar a ease sólo que este último empieza más rápido de lo que termina.
- Cubic-bezier: Podemos configurar la curva de velocidad a nuestro gusto utilizando la función cúbica de Bezier. Acepta cuatro valores entre 0 y 1.
Animation-delay: Retardo en segundos antes de comenzar la animación.
Animation-iteration-count: Específica cuantas veces se reproduce la animación, también podemos ponerle que se reproduzca infinitamente.
Animation-direction: Dirección de la animación, de forma normal, marcha atrás o alternando, es decir que siga el orden que hemos especificado, o al revés de éste o que vaya cambiando de modo que las iteraciones impares sigan una dirección normal y las pares una dirección contraria. Esto último funcionará siempre y cuando animation-iteration-count sea mayor a 1.
Animation-play-state: Especifica si la animación se está ejecutando o está en pausa.
Animation-fill-mode: Nos permite indicar si el elemento afectado, mantiene o no el estilo cuando termina la animación. Por ejemplo si le indicamos forwards mantendrá el estilo con el que ha terminado la animación.
KeyFrames
Los keyFrames son una parte esencial de las animaciones, ya que con ellos definimos los estilos que serán aplicados al elemento durante la animación. Debemos tener al menos dos keyframes, el inicial y el final. La forma de declarar los distintos estados de la animación es a través de “from” y “to”, aunque lo más común es hacerlo mediante porcentajes lo que nos permite tener más keyframes intermedios.
@keyframes “nombre de la animación”
{
0%{ /*Estado inicial*/
}
20%{
}
50%{
}
…
100%{ /*Estado Final*/
}
}
Debemos tener en cuenta que las animaciones no devuelven al elemento a su estado natural por defecto aunque lo podemos lograr con las propiedades animation-iteration-count y animation-direction.
Para que estos conceptos queden claros, a continuación muestro dos ejemplos donde he utilizado la mayoría de parámetros disponibles.
See the Pen Example Animations CSS3 by Enrique (@enriquearkas) on CodePen.0
Vemos un primer elemento cuya animación es infinita, para hacer el efecto movimiento voy variando el “left”, he cambiado el color del background a la mitad y en el final de la animación, el border-radius, y además empieza a rotar a los 1,5 segundos con un retardo de 1s la primera vez que se ejecuta. Todo esto lo podemos ver en el código css (@-Keyframe) de la animación llamada “AnimInfinita”.
La animación del segundo elemento del ejemplo, sólo se activa cuando hover sobre él, para conseguir esto debemos poner el nombre de la animación (“animation-name”) dentro de la pseudoclase :hover del elemento, con esto sacamos la conclusión de que la propiedad animation-name es la que realmente lanza la animación.
Esta vez he cambiado el color del fondo, la sombra del elemento y del texto, también he aumentado la escala 3d del elemento, para dar una sensación de zoom y por último para probar la propiedad fill-mode, he mantenido el estilo con el que ha terminado la animación. El código código css (@-Keyframe) de la animación se llama “hoverAnim”.
Las animaciones se introdujeron con CSS3, y realmente son muy útiles para dar a nuestros proyectos web dinamismo. Esperemos que en un futuro CSS3 siga creciendo y mejorando en aspectos tan buenos y útiles como este.
Gracias carlos que Dios te bendiga por proporcionarnos tan buenas herramientas
Gracias Carlos Y Enrique de la Torre, que siendo el nombre ubicado en el pié del articulo me da a entender que él fue quien redactó el articulo :)
no sabe cuanto me ha servido todos tus tutos,, gracias a ti tengo trabajo y ha gustado mucho lo que he hecho, con conocimientos en programacion pero con muy poco de de html, css y php, tus tutos me han servido mucho y queria agradecerte, bendiciones,, y muchos exitos, sigue compartiendo tu conocimiento,, haces bien
Muchas gracias a ti por ver mi contenido :)
Hola Carlos, soy Ulises apenas estoy a la mitad de la carrera en diseño y me agradó mucho tu trabajo, inspira para crear algo similar (sin robar tus ideas) pero hay algo q’ quiero hacer y es un hipervínculo q’ tenga un efecto para q’ después de dar clic este gire en su propio eje y permita ver su animación y después me redireccione, lamentablemente mi maestro no sabe hacerlo y el internet no me ofrece una solución…… Agradecería mucho tu ayuda Gracias.
hola espero me pueda ayudar estoy intentando animar cda elemento de mi pag. web haciendo que todos los elementos aparescan desde abajo y que al hacer scroll aparescan mas con un retardo de un segundo
porfa necesito ayuda…
que animación puedo usar para aparecer y desvanecer un div?
Tengo una gran duda. quiero comenzar bien con los cursos, pero… donde puedo conseguir el CCS y el Javascripts? he estado buscando pero no estoy seguro de las selecciones. necesito ayuda por favor
solo tengo el Atom.
Hola, para usar CSS y JS solo necesitas un editor de texto (En tu caso el Atom) y si quieres una herramienta de autocompletado (Te recomiendo Emmet, no se si esta para Atom)
Hola werner gracias por la respuesta. tengo Atom pero el ccs y el java viene incluido en Atom? porque la vez que intente en trabajar los estilos no me salian y lo hice tal como el video y no salio igual.
tengo que descargar aparte el ccs y el js aparte?