CSS: Animaciones con @keyframes
12/10/2018 by Casanova

Front.id

Gracias a la propiedad animations con CSS3 podemos conseguir animaciones. Para ello basta con entender algunos conceptos básicos y a partir de ahí dejar volar la imaginación. Vamos a adentrarnos en la estructura básica de una animación utilizando keyframes.

La teoría

Los parametros que recibe animation son:

animation-delay: es el tiempo de retardo entre que el elemento se carga y el comienzo de la animación. El valor por defecto es 0 y podemos utilizar segundos (s) o milisegundos (ms) como valores (por ej.: 2s ó 200ms).

animation-direction: especifica si la animación debe ser solo lineal o se debe invertir al terminar. El valor por defecto es: normal (una vez concluida la animación esta volverá a empezar desde el primer fotograma). Otro valor posible es: alternate, que una vez que llegue al final, invertirá el sentido de la animación.

animation-duration: la duración que tendrá. El valor por defecto es 0 y podemos utilizar segundos (s) o milisegundos (ms) como valores (por ej.: 2s ó 200ms).

animation-iteration-count: El número de veces que se repite. El valor por defecto es 1 y podemos indicar una cantidad numérica o utilizar infinite para que se repita indefinidamente.

animation-name: especifica el nombre de la animación y también sera el nombre asociado a los @keyframes (por ej.: foo);

animation-play-state: determina si la animación esta activa o no. El valor por defecto es: running (la animación va a ser reproducida) y el otro valor posible es: paused (la animación se pausará).

animation-timing-function: Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración. EL valor por defecto es: ease. Puedes definir tu propia curva de aceleración con: cubic-bezier(x,x,x,x): donde los valores posibles son de 0 a 1. Puedes jugar con esto y solucionar tus necesidades desde aquí. Ó hacer uso de valores pre establecidos:

  Detalle cubic-bezier(x,x,x,x)
linear La animación tiene la misma velocidad en todo momento. cubic-bezier(1, 1, 1, 1)
ease La animación empieza lenta, luego va rápida, y temina aun más lenta. cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in La animación empieza lenta. cubic-bezier(0.42, 0, 1, 1)
ease-out La animación termina lenta. cubic-bezier(0, 0, 0.58, 1)
ease-in-out La animación empieza y termina lenta. cubic-bezier(0.42, 0, 0.58, 1)

animation-fill-mode: permite definir qué valores aplica la animación fuera del tiempo de ejecución. Esto puede ser antes de que la animación haya sido aplicada, y/o después de que haya terminado de ejecutarse.  El valor por defecto es: none es decir que la animación no aplicara ningún estilo al elemento antes y después de ser ejecutada. Otros posibles valores son:

forwards Una vez terminadas todas las iteraciones de la animación, el elemento obtendrá los valores finales de la animación.
backwards Antes de empezar la animación (y el delay), el elemento obtendrá los valores iniciales de la animación.
both Antes de empezar la animación (y el delay), el elemento obtendrá los valores iniciales de la animación. Y una vez terminadas todas las iteraciones de la animación, el elemento obtendrá los valores finales de la animación.
initial Asigna la propiedad a su valor por defecto.
inherit Se heredara el estilo de su objeto padre.

Uso

Algo a tener en cuenta, es que podemos declarar individualmente las propiedades:

.elemento {
  animation-name: stretch;
  animation-duration: 5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

O agruparlas en una declaración abreviada:

.elemento{
  animation: [NombreAnimación] [Duración] [FunciónTiempo] [Retraso] [Iteraciones] [Dirección]
}

Ahora llega el momento de declarar la secuencia de nuestra animación, con @keyframes podemos establecer el inicio y el final, como también los posibles puntos intermedios.

A estos puntos de nuestra secuencia podemos declararlos de dos formas:

Declarando "desde" y "hasta", en caso que solo necesitemos indicar el inicio y el final

@keyframes foo {
    from {

    }

    to {
        
    }
}

Declarando porcentajes sobre el tiempo que dure la animación, esto permite mayor cantidad de valores

@keyframes foo {
    0% {

    }

    50% {

    }

    100% {
        
    }
}

Los valores van expresados en el porcentaje, yendo desde o a 100% de la duración de la animación.

Ejemplo

Ahora que sabemos como funciona probemos todo en el siguiente ejemplo

Y aquí un ejemplo más complejo.

Tags

Comentarios

Submitted by By silvia (not verified) on Mon, 05/27/2019 - 17:23

how can I change the speed in a css3 animation with onchange? is it possible to have an exemple?

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.