• HTML
  • CSS
  • JS

    Teorías CSS

  • Especificidad

  • Metodología BEM

  • Teoría Medidas de Texto

  • Archivo Normalize.CSS

  • Teoría de las Cajas

    • Propiedades

  • Selectores CSS

  • Pseudo-Elementos

  • Pseudo-Clases

  • Propiedades de texto

  • Propiedades de Cajas

  • Propiedad Position

  • Propiedad Display

  • Diseños CSS

  • Object-fit-Object-position

  • Colores CSS

  • Flex-Box

  • Grid-Box

  • Responsive Design

  • Transition

  • Propiedad Transform

  • Variables CSS

  • Filtros CSS

    • Otros

  • Errores Comunes

Animaciones

CSS es un lenguaje lo bastante potente como para llegar a crear animaciones, las cuales en sí funcionan de una forma similar al de las transiciones, sin embargo esto solo hasta cierto punto, ya que la creación de animaciones en CSS involucra varios recursos especiales:

@keyframes

Se trata de una clase especializada para la creación de las animaciones, dentro de esta es donde se definirán las propiedades de esta, la estructura de esta clase requiere que justo después de su uso se indique el nombre que se le dará a la animación por crear, luego de este nombre le siguen las llaves ({}) delimitadoras de la propiedad.

Nota: el nombre de la animación es creado por el desarrollador, no son parámetros preestablecidos.

Dentro de esta, las propiedades que se aplicarán en la animación se dividen dentro de dos propiedades contenedoras, las cuales son:

  • From: Contiene las propiedades que el elemento poseerá cuando se inicie la animación

  • To: Contiene las propiedades que el elemento poseerá cuando se finalice la animación

Ejemplo

Porcentajes

From y To no son la única forma de estructurar las propiedades de la animación, otra forma de hacerlo es especificando uno o más porcentajes de desarrollo, para aplicar alguna propiedad, es decir se pueden usar porcentajes como contenedores de propiedades, que se aplicarán a la animación cuando alcance ese nivel de desarrollo.

La ventaja de esta técnica es que podemos aplicar las propiedades en cualquier momento de la animación que se desee, sin tener que limitarse a aplicarlas al principio o al final.

Propiedades del item

Se refiere a todas aquellas propiedades que se definirán dentro de la clase del elemento HTML, con el fin de vincular la animación a este y definir su comportamiento.

Animation-name

Esta propiedad vincula la animación con el elemento HTML, para hacerlo se utiliza la propiedad animation-name con el nombre de la animación en cuestión dentro de la clase que posee el elemento HTML, en otras palabras para vincular la animación con el elemento HTML se hace un llamado a la animación desde la clase que posea el elemento.

Animation-duration

Esta propiedad únicamente define la duración de la animación, ya que se trata de una propiedad de tiempo acepta segundos como valor

animation-timing-function

Esta propiedad define la forma en la que se llevará a cabo la animación, simplemente modifica el ritmo en el que esta se ejecutará, es decir dependiendo de su valor puede que el ritmo de la animación aumente o disminuya en algún punto de esta, sus valores posibles son:

  • Linear: La animación se desarrolla siempre a la misma velocidad

  • Ease: La animación empieza rápido y su velocidad disminuye a medida que termina

    Nota: Este se trata del valor por defecto de la propiedad

  • Ease-in: Este valor es el opuesto de ease, la animación empieza despacio y termina rápido

  • Ease-out: Este valor se asemeja mucho a ease pero no llega a alcanzar tanta velocidad, acelera y frena más lentamente

  • Ease-in-out: La animación empieza despacio, acelera y luego termina despacio

Nota: Esta propiedad no modifica el tiempo de duración de la animación, eso es un rol exclusivo de la propiedad animation-duration

Cubic-bezier

Se trata de un valor especial que puede adoptar esta propiedad, su función consiste en utilizar las coordenadas de un cubic-bezier para definir el movimiento y la velocidad que se aplicará en la animación, ya que el cubic-bezier se basa en coordenadas como las de un mapa cartesiano, para cada coordenada se necesitan dos datos, un valor del eje X y uno del eje Y.

Gráfica de un Cubic-bezier

Código

La línea que conecta las dos coordenadas representa el desarrollo de la animación mientras que los valores del eje X y el eje Y representan la cantidad de movimiento que se realizará en ese respectivo eje en ese momento.

Es perfectamente posible el aplicar los valores de las coordenadas manualmente, sin embargo no es algo recomendable, ya que a la hora de definir adecuadamente el movimiento de la animación, es de gran ayuda apoyarse en una gráfica cubic-bezier, para lo cual es mejor recurrir a un generador cubic-bezier, ya que estos se encuentran a plena disposición en internet, y permiten interactuar con la gráfica a medida que se modifican los valores, en este enlace se encuentra un buen generador cubic-bezier.

En las herramientas de desarrollador de Google también se encuentra un generador cubic-bezier, para acceder a este es necesario dar "clic derecho", seguido se ingresa en "Inspeccionar elemento", y se procede a buscar los estilos CSS de la página, en el recuadro que permite añadir estilos ingresamos "animation-timing-function: cubic-bezier(.17,.67,.83,.67)" para aplicar la propiedad con un valor de ejemplo, junto al valor "cubic-bezier" aparecerá un recuadro al clickearlo se extiende el generador cubic-bezier que nos permite modificar los valores de las coordenadas al emplearlo.

Aplicando este recurso a las animaciones se pueden lograr movimientos más realistas o de rebote fácilmente, incluso existen librerías completas enfocadas a este recurso.

Animation-iteration-count

Esta propiedad define el número de repeticiones que ejecutará la animación, debido a su simplicidad esta propiedad acepta cualquier valor numérico entero, sin embargo también cuenta con otro valor posible, el valor infinite, el cual indica que la animación se repetirá indefinidamente.

Animation-direction

Esta propiedad define la dirección en la que se realiza la animación, sus posibles valores son:

  • Normal: Se trata del valor por defecto, esta orientación desarrolla el proceso de 0% a 100%

  • Reverse: Este valor invierte el sentido normal de la animación, esta orientación desarrolla el proceso de 100% a 0%

  • Alternate: Este valor alterna entre los dos anteriores, es como ir y volver, primero un valor normal y luego reverse, esta orientación desarrolla el proceso de 0% a 100% y luego de 100% a 0%.

    Nota: este valor solo surte efecto cuando se realiza más de una repetición, de lo contrario carece de sentido

  • Alternate-reverse: Este valor es lo contrario a alternate, realiza el mismo efecto con la diferencia de que empieza con una dirección reverse y luego una normal, esta orientación desarrolla el proceso de 100% a 0% y luego de 0% a 100%

    Nota: este valor solo surte efecto cuando se realiza más de una repetición, de lo contrario carece de sentido

Ejemplo

Animation-fill-mode

Esta propiedad define cuál va a ser el modo final de la animación, cuenta con varios valores posibles:

  • None: Define que la animación culmine en el principio

  • Backwards: Define que el elemento obtendrá los valores de estilos establecidos por el primer fotograma clave (depende de la dirección de la animación) y lo conservará durante el periodo de retraso de la animación

    Nota: El uso de esta es muy escaso

  • Forwards: Este valor define que el elemento permanezca con los valores definidos en la última instancia, es decir permanecerá con las propiedades definidas por el punto en el que se finalice

  • Both: Este valor define que el elemento inicie con las propiedades que se definan al comienzo de la animación

Ejemplo

Animation-delay

Esta propiedad configura un retraso en la ejecución de la animación, su función es justamente esa: demorar un poco el inicio de la animación.

Ejemplo

Contacto

¿Quién soy?

Mi nombre es Carlos Miguel Puche Moreno, estoy estudiando programación web de forma autodidacta, si quieres saber más visita mi perfil de GitHub haciendo clic en mi fotografía, o visita mis redes sociales:

Redes

Curriculum