Animacion en CSS 3

milogo

Ideas principales

  • regla @keyframes

    • Regla principal a la hora de crear animacion en CSS

  • propiedades obligatorias animation-name y animation-duration

    • propiedades necesarias para una animacion que definen su nombre y el tiempo que duraran

  • etiqueta anmation-iteration-count

    • etiqueta que describe cuantas veces se repetira la animacion

  • animation-timing-function

    propiedad que cambia el timing de las partes de la animacion

    • linear

      • Describe el timing de la animacionn como Normal

    • ease

      • Describe el timing de la animacion como lento

    • easein

      • realentiza la primera seccion de la animacion

    • ease out

      • Realentiza la ultima seccion de la animacion

    • ease-in-out

      • Realentiza la primera y ultima parte de la animacion pero no el medio

    • cubic bezier

      • permite describir el timing de cada keyframe de la animacion

  • animation-direction-function

    propiedad que cambia la direccion en la que se realiza la animacion

    • normal

      • la direccion descrita normalmente

    • alternate

      • la direccion normal, solo que se intercambia con otra animacion

    • reverse

      • realiza la animacion en reversa

    • alternate-reverse

      • realiza la animacion en reversa pero se intercambia con otra animacion

  • animation delay

    • describe la cantidad de tiempo que tardara una animacion en comenzar

  • animation-fill-mode

    propiedad que especifica lo que hara un elemento cuando no esta realizando una animacion

    • none

      • elemento default, hace que el elemento regrese a su posicion definida

    • forwards

      • el elemento se quedara en el lugar en el que termina la animacion

    • backwards

      • el elemento tomara las propiedades que le das antes de que la animacion se realize

    • both

      • el elemento tomara las propiedades que le des antes y despues de que la animacion se realize

  • animation

    • etiqueta rapida que reune toda la animation

apuntes de la clase

Las animaciones son una parte integra de html y tienen pocas limitaciones, como mezclar aspectos, pero si respetas las reglas puedes llegar a crear animaciones muy complicadas y completas solo utilizando CSS3

animaciones css

Resumen

Por medio de la regla @keyframes se pueden animar los elementos de html para que realizen acciones especificas, la variedad de opciones que se le pueden aplicar a los elementos da espacio para la creacion de sitios con animaciones realmente complicadas y que, como pueden llegar a quedar muy bien.

la experimentacion es la base de la animacion de CSS y por medio de las diferentes reglas y sus convinaciones se pueden llegar a resultados muy favorables sin la necesidad de animar frame a frame a mano y sin tener que apoyarse de software exterior.