adsense

XRL Tech Corner

Tutoriales online de programación, CMS, Raspberry y artículos sobre tecnología.

Animaciones css con keyframes

Keyframes css

Animación con keyframes en CCS

En este tutorial hablaremos de la animación con keyframes css.
Los keyframes nos proporcionan un guión de cómo, cuando y qué propiedades cambian a lo largo del tiempo de una animación.

Contenidos

Para definir una animación con keyframes se utiliza la sintaxis @keyframes con corchetes y dentro se especifican los pasos basados en porcentajes, 0%, 50%, 80%, 100% que definen el guión de la animación. 
El 0% es el principio y el 100% el final.
También se puede usar la palabra from (que equivale a 0%) y to (equivale a 100%).

Estas definiciones se pueden reutilizar luego en otros elementos de la página para que tengan el mismo tipo de animación también.

Habitualmente primero se define una animación y luego se le asigna a un identificador de objeto mediante la palabra animation.

Recomendado Utiliza el editor html css online para probar los ejemplos

 También tienes disponible el código fuente del tutorial en GitHub

@keyframes nombre{
   parte 1 {propiedad: valor;}
    parte 2 {propiedad: valor;}
   parte 3 {propiedad: valor;}
   etc...
}

#id_obj{
  transform-origin: left center;
  animation: nombre duracion retraso iteraciones velocidad;
}

#id_obj2{
  transform-origin: left center;
  animation: nombre duracion retraso iteraciones velocidad;
}


Si hay código en la animación que se repite, se puede escribir de esta forma:

   parte 1, parte 2, parte3 {propiedad: valor;}
   parte 4 {propiedad: valor;}
   

Por ejemplo podemos definir una animación (que tarde 1 segundo) que llamaremos "aparecer" y que cambie la opacidad desde 0 (invisible) a 1 (visible):

@keyframes aparecer{
   from {opacity: 0; visibility: hidden;}
    to {opacity: 1; visibility: visible;} 
}

#id_obj {
  animation: aparecer 1s;
}


En problema en este ejemplo es que cuando acabe la animación volverá al estado inicial. Y nos gustaría que se quedara en el estado final. Para eso tenemos que añadir la palabra "forwards". Es lo que se llama "fill-mode" y especifica si se mantienen los estilos de antes o de después de la animación.

#id_obj {
  animation: aparecer 1s forwards;
}


Tal como vemos en la sintaxis hay que especificar un nombre y una duración:

animation: nombre duracion retraso iteraciones velocidad;


Opcionalmente se puede definir un "retraso" en segundos a la hora de iniciar la animación. 

También se puede definir el total de iteraciones, que es el número de veces que se repite la animación. Se puede poner un número o la palabra "infinite".

La velocidad es una función que varía con el tiempo que define la curva de velocidad de la animación. 
Es decir, si la animación es lineal, o se acelera al principio, o al final, o en la mitad.
Estos son los valores habituales:
linear. Tiene la misma velocidad de principio a fin.
ease. Empieza lento, luego se acelera y luego acaba lento.
ease-in. Empieza lento.
ease-out. Acaba lento.
ease-in-out. Empieza y acaba lento.

Otra característica importante es que se puede definir una curva de Bezier para esta función de tiempo, de tal modo que podamos realizar animaciones a medida que no sean lineales, para generar "rebotes", "acelerones", y efectos de un modo más realista.

Para poner un ejemplo de keyframes vamos definir una animación que simule un desplazamiento vertical desde arriba hacia abajo con una opacidad progresiva de 0 a 1 y que luego rebote y gire un poquito. 

La idea es realizar una animación de un formulario de suscripción a una newsletter o un blog.
Seguro que podemos recordar algo similar en muchas webs con formularios modales de suscripción a newsletters.

Debajo mostramos el código CSS y luego el HTML con los divs. Hemos colocado un botón llamado "mostrar formulario" para iniciar la animación correspondiente.



  id="id_form">  name="nform">  style="border: 0px solid red; height: 100px; padding: 15px;">  style="border: 0px solid red; float: left; max-width: 175px;">  align="center" class="fa fa-envelope fa-5x">   style="float: left; width: 20px;">   style="border: 0px solid red; float: left; max-width: 250px; text-align: center;"> SUSCRIBETE /> Suscríbete a nuestra newsletter para obtener los mejores artículos de tecnología justo en tu buzón.   style="background-color: #e0e6f8; border: 0px solid red; height: 50px; line-height: 40px; margin: 0; padding: 0; text-align: center; vertical-align: bottom;">  name="email" placeholder="Escribe tu email..." size="15" style="border: 1px solid blue; height: 16px; vertical-align: bottom;" type="text" value="" />  style="background-color: #e0e6f8; border: 0px solid blue; height: 14px; vertical-align: middle;"> class="fa fa-check-square fa-2x" style="color: #5882fa; line-height: 20px; vertical-align: bottom;">   


  class="lab"> 

 

Pruébalo onclick="suscribete()">Invoca formulario

 

 

 
SUSCRIBETE
Suscríbete a nuestra newsletter para obtener los mejores artículos de tecnología justo en tu buzón.

 

Pruébalo pinchando en el botón de abajo

Valora este artículo del blog:
Animaciones css con transformaciones
Imágenes vectoriales con SVG

Artículos relacionados

 

Comentarios

No hay comentarios por el momento. Se el primero en enviar un comentario.
¿Ya està registrado? Ingresa Aquí
Invitado
Viernes, 20 Octubre 2017
Si desea registrarse, por favor rellene los campos de nombre de usuario y nombre.

Imagen Captcha