Como usar CSS Transitions. Como usar CSS Transform. Como crear efectos de movimiento con CSS?

La magia de muchos efectos que ahora vemos en algunos websites se hacen con la propiedad transition de CSS, la cual ya es soportada por todos los navegadores. Los cambios que se hacen a algunos bloques o elementos con CSS son inmediatos, pero con CSS transition podemos añadir una variable de tiempo, la cual hace esos cambios que normalmente son inmediatos ahora sean graduales.

Los parámetros a tener en cuenta cuando se usan CSS transitions serán:

  • propiedad a modificar: Indicando la propiedad a la que le vamos a aplicar el efecto.
  • delay: Indica cuando debe empezar la animación.
  • duración: Cuanto va a durar la transición.

Ejemplo:

div {transition: <propiedad> <duración> <delay>}

div {transition: background-color 2s 1s}
En el ejemplo de arriba estariamos modificando el color de fondo de un bloque div. Durara 2seg haciendo la transición y empezara 1seg. después de que haya cargado el bloque.

Muy bien, ya sabemos como se usan las CSS transitions !! Ahora la pregunta es: Como activamos este efecto? O donde especificamos al color que al que queremos aplicar esta transición? o el tamaño de la imagen que queremos cambiar. Bueno, algunas veces sera cuando el mouse pase por el elemento(:hover), o cuando el elemento entre en foco(:focus), acá las opciones son bastantes pero ya depende de tu imaginación. Pero vamos a demostrarlo con el ejemplo mas usado: cambiar el color de fondo de un botón cuando el mouse pasa por arriba(:hover).

 

[editr item=”post-746″ html=”csstransitions.html” css=”csstransitions.css” scrollbar=”dark” theme=”monokai” ]

Add Comment