{ . . . }

Animando elementos con CSS3

Sin Comentarios

Las animaciones fueron unas de las grandes incorporaciones de CSS3, con ellas damos vida a los elementos del documento en HTML y hacemos cosas que antes solo eran posibles utilizando animaciones en flash o en ocasiones los famosos GIF. Asi que las propiedades de animaciones que nos provee CSS nos van a permitir cambiar otras propiedades de CSS con movimiento y tiempo determinado.

En este articulo te mostrare las características generales y básicas de las animaciones en CSS.

Animar con CSS

Para construir animaciones en CSS solo debemos de asignar la propiedad animation al elemento que deseamos animar, esta nos va a permitir establecer o configurar las otras propiedades que se requieren para establecer una animación completa, lo otro que debemos de establecer los pasos o secuencia que determinaran la acción animada, esto lo hacemos por medio de los @keyframes.

Establecemos la animación de un elemento con las siguientes propiedades:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

Al momento de aplicar una animación a un elemento lo podemos hacer de dos formas.

1. Aplicar la animación de con propiedades animation por separadas

elemento {
   animation-name: myanimacion;
   animation-duration: 10s;
   animation-timing-function: ease-out;
   animation-delay: 3s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-fill-mode: forwards;
   animation-play-state: running;
}
2. Aplicar la animación utilizando la versión abreviada “Shorthand” de animation css
elemento {
     animation: animation-name duration timing-function delay iteration-count direction fill-mode play-state;
}
Ahora, para hacer una animación debemos de saber como funciona cada una de las propiedades que podemos involucrar en una acción animada. Veamos lo que puede hacer cada una.

Propiedad Descripción
• animation-name Con esta propiedad especificamos el nombre de la animación.
• animation-duration con esta propiedad especificamos la duración que tomara la animación en reproducirse. El tiempo lo podemos especificar en segundo o mili-segundos. El valor por defecto es 0.
• animation-timing-function con esta propiedad definimos la progresión, curva de velocidad o ritmo de la animación. Los valores que podemos utilizar son linear | ease | ease-in | ease-out | steps | stept-end | step-start y el valor cubic-bezier(x,x,x,x) que es totalmente configurable. El valor por defecto es ease.
• animation-delay Con esta propiedad definimos el tiempo que tardara la animación en iniciar. Estos valores los especificamos en segundo o mili-segundos. El valor por defecto es 0, por lo que la animación no esperara ningún tiempo para reproducirse.
• animation-iteration-count con esta propiedad definimos el numero de veces que se ejecutara la animación. Podemos definir un numero de veces o el valor infinito que se ejecutara todo el tiempo. El valor por defecto es 1.
• animation-direction Con esta propiedad especificamos la dirección de ejecución de la animación, esta puede ser normal que es el valor por defecto, puede ser en reversa con reverse, alternate o alternate-reverse.
• animation-fill-mode  con los valores de esta propiedad especificamos los estilos que se aplicaran antes de ejecutarse la animación o después de ejecutarse la misma. Lo hacemos con forwards, backwards o both para seleccionar ambos estados. El valor por defecto es none.
• animation-play-state  Esta propiedad especifica si la animación debe de estar pausada o debe de reproducirse. Los valores son: paused | running siendo running el valore por defecto.

Configuración de las secuencias para animar con los @keyframes

Después de definir las características de la animación vamos a tener que configurar o definir el aspecto de la misma, definir los pasos que debe de recorrer el elemento para dar la sensación de movimiento. esto lo hacemos utilizando la regla @keyframes donde cada fotograma define un momento puntual durante la secuencia de la animación.

podemos declarar los @keyframes de 2 formas.

declarando los pasos inicial y final de la animación

@keyframes nombre-animacion {
   from {
      /* Estilos a aplicar, comienzo*/
   }
   to {
      /* Estilos a aplicar, final */
   }
}
También podemos especificar los puntos o fotogramas clave de la animación por medio de porcentajes “%” esto nos permite tener un mayor control sobre la animación.
@keyframes nombre-animacion {
   0% {
      /* estilos a aplicar en este punto */
   }
   25% {
      /* estilos a aplicar en este punto */
   }
   50% {
      /* estilos a aplicar en este punto */
   }
   100% {
      /* estilos a aplicar en este punto */
   }
}
Lo que va a pasar es que en cada uno de los pasos o puntos claves definidos se van a aplicar las propiedades css aplicados en cada frame o punto, podemos cambiar posiciones, dimensiones, colores y demás propiedades css, en fin cambios que se requieren para hacer una acción animada.

Así que vamos a colocar en práctica la teoría que acabamos de ver en el siguiente ejercicio.

See the Pen Animacion basica – CSS3 by frontend (@tutosytips) on CodePen
1


Lo que hicimos anteriormente fue hacer dos animaciones, una al elemento “bola” y otra al background del elemento body. en la bola creamos 3 puntos claves de la animación, al 0% al 50% y al 100% y en cada punto cambiamos la posición de la bola por medio de la propiedad left.

También podemos utilizar los pasos “steps()” para poder controlar los pasos o los frames que se mostraran en el marco de la secuencia animada y en el tiempo determinado. Por ejemplo: con steps(20) establecidos en la animación nos aseguramos que solo 20 fotogramas se ejecutaran en la secuencia animada y tiempo asignado. Veamos un ejemplo utilizando los pasos en conjunto a una sprite image de secuencia.

See the Pen animación Sprites con CSS3 by frontend (@tutosytips) on CodePen
1

En la animación anterior utilizamos los pasos, en total 8, pues es el numero de frames de la acción animada, los frames se ejecutaran en 1 segundo y será una animación infinita. En los Keyframes hacemos un fromto es decir desde el punto 0 con una posición de background 0 hasta una posición negativa de -798px que es el ancho de la imagen.

En el siguiente vídeo del curso Aprende CSS3 desde 0 puedes ver un poco más los conceptos de las propiedades para animar con CSS.

CSS Animation tiene total soporte en los navegadores modernos, pero es una buena práctica utilizar el prefijo –webkit- para dar soporte a los navegadores chrome, safari, android browser de versiones anteriores.

A continuación el soporte que nos provee CanIuse:

Can I Use css-animation? Data on support for the css-animation feature across the major browsers from caniuse.com.

Más información:

W3C | Developer Mozilla

Comentar

avatar