Como crear animaciones con CSS

Ya sabíamos que el desarrollo web con Flash era una moda que no iba a durar mucho tiempo, ya que crear páginas webs con este código suponía una mala orientación para el posicionamiento, la visibilidad en diferentes dispositivos, etc.

La principal razón por la que se utilizaba Flash era por la sorprendente sensación que podíamos dar a nuestros usuarios con infinidad de movimientos, transiciones y animaciones que éste nos permitía.

Con la llegada CSS3 tenemos a nuestra disposición métodos que nos permiten crear el mismo efecto y hoy os voy a enseñar cómo hacerlo.

 

Sintaxis

La sintaxis para crear una animación es la siguiente:

transition: Propiedad Duración TipoMovimiento Retraso;

No te olvides, para que funcione en todos los navegadores debes añadir sus prefijos correspondientes:

  • transition:
  • -moz-transition:
  • -webkit-transition:
  • -o-transition:
  • -ms-transition:

 

Propiedad

La propiedad puede ser all para indicar que cualquier propiedad sea animada. O también utilizar una determinada propiedad como por ejemplo background-color.

Ojo, no todas las propiedades pueden ser animadas, más abajo te dejo una lista de las propiedades que pueden serlo.

 

Duración

La duración se mide en segundos o milisegundos, por ejemplo 1s sería un segundo y 0.3s serían 300 milisegundos.

 

Movimiento

El tipo de movimiento indica el efecto, la velocidad que tendrá la animación. Algunas son linear, ease, ease-in, ease-out, etc. A continuación te dejo un ejemplo, pasa el ratón por encima para ver el resultado.

Sin tipo
linear
ease
ease-in
ease-out
ease-in-out

 

Retraso

El tiempo que le damos de espera a la animación, se mide en segundos o milisegundos:

0s
0.3s
0.5s
1s
1.5s
2s

 

Ejemplo

Bien, vamos con un ejemplo. Digamos que tenemos el siguiente elemento:

 

Elemento

 

Con su estilo css:

 

 

En prinicpio ya lo tenemos, pero ¿y la animación?, la animación ocurrirá cuando el valor de una propiedad cambie, por ejemplo vamos a hacer que cuando el cursor esté por encima del elemento se vuelva más ancho.

 

Elemento

 

¿Sencillo verdad? Pues al igual que con el ancho, puedes hacer animaciones con colores, alturas, escalas, rotaciones, etc.

Propiedades permitidas

  • background-color
  • background-image
  • background-position
  • background-size
  • border-color
  • border-radius
  • border-width
  • border-spacing
  • bottom
  • -moz-box-flex
  • box-shadow
  • color
  • -moz-column-count
  • -moz-column-gap
  • -moz-column-rule-color
  • -moz-column-rule-width
  • -moz-column-width
  • clip
  • fill
  • fill-opacity
  • flood-color
  • font-size
  • font-size-adjust
  • font-stretch
  • font-weight
  • height
  • -moz-image-region
  • left
  • letter-spacing
  • lighting-color
  • line-height
  • margin
  • marker-offset
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline-color
  • outline-offset
  • -moz-outline-radius
  • outline-width
  • padding
  • right
  • stop-color
  • stop-opacity
  • stroke
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-miterlimit
  • stroke-opacity
  • stroke-width
  • text-indent
  • text-shadow
  • top
  • -moz-transform-origin
  • -moz-transform
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index

 

Encuentra ayuda

¿Te queda alguna duda?

Hostingato ® 2022. Marca registrada.

Las cookies son importantes para ti, influyen en tu experiencia de navegación. Usamos cookies técnicas y analíticas. Puedes consultar nuestra Política de cookies. Al hacer click en "Aceptar", consientes que todas las cookies se guarden en tu dispositivo o puedes configurarlas o rechazar su uso pulsando en "Configurar".

Aceptar Configurar